/* =============================================================================
 * paperwork Treuhand – Design Tokens
 *
 * Layout, Typografie, Spacing und Brand-Fallbacks.
 * Wird auf JEDER Seite zuerst geladen (vor themes.css und admin.css).
 *
 * Marken- und Flaechen-Variablen werden von themes.css (Public-Site)
 * vollstaendig ueberschrieben. tokens.css liefert nur Defaults fuer Admin
 * und als Fallback.
 * ========================================================================== */

:root {
  /* ---------- Brand-Fallbacks (themes.css ueberschreibt) ---------- */
  --ci-magenta: #d05f72;
  --ci-coral: #d77564;
  --ci-gold: #de8b56;
  --ci-gradient: linear-gradient(
    105deg,
    var(--ci-magenta) 0%,
    var(--ci-coral) 52%,
    var(--ci-gold) 100%
  );
  --ci-gradient-soft: linear-gradient(
    105deg,
    color-mix(in srgb, var(--ci-magenta) 14%, transparent) 0%,
    color-mix(in srgb, var(--ci-coral) 10%, transparent) 50%,
    color-mix(in srgb, var(--ci-gold) 14%, transparent) 100%
  );

  /* ---------- Admin-Panel: warmes Dunkel ---------- */
  --fx-void: #0f0a10;
  --fx-panel: #181018;
  --fx-elevated: #211520;
  --fx-line: rgba(255, 255, 255, 0.06);
  --fx-glow: color-mix(in srgb, var(--ci-magenta) 42%, transparent);

  /* ---------- Typografie ---------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Syne", var(--font-sans);

  /* ---------- Spacing ---------- */
  --space-xs: 0.35rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  /* ---------- Radien ---------- */
  --radius-sm: 0.35rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --radius-full: 9999px;

  /* ---------- Layout ---------- */
  --header-h: 6.25rem;
  --content-max: 88rem;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-med: 420ms var(--ease-out);

  /* Scroll-Fortschritt (0..1, per JS gesetzt) */
  --fx-scroll: 0;

  /* ---------- Light-Fallbacks fuer den Admin (kein themes.css) ---------- */
  --bg-page: #ebe0d3;
  --bg-elevated: #faf3ea;
  --bg-muted: #e0d3c1;
  --bg-accent: #e8d5bf;
  --bg-gradient: linear-gradient(
    135deg,
    #ebe0d3 0%,
    #e7d8c5 45%,
    #e3cdb7 100%
  );
  --text-primary: #15090d;
  --text-secondary: #2e1e26;
  --text-muted: #5a4750;
  --border-subtle: rgba(21, 9, 13, 0.12);
  --shadow-sm: 0 1px 2px rgba(21, 9, 13, 0.07);
  --shadow-md: 0 12px 36px rgba(21, 9, 13, 0.10);
  --shadow-lg: 0 28px 72px rgba(21, 9, 13, 0.14);
  --shadow-glow: 0 0 36px color-mix(in srgb, var(--ci-magenta) 22%, transparent);
  --selection-bg: color-mix(in srgb, var(--ci-magenta) 32%, transparent);
}

::selection {
  background: var(--selection-bg);
}