/* ============================================================================
   tokens.css — Token-Vertrag mit Fallback-Chain
   ----------------------------------------------------------------------------
   Jedes Token bezieht seinen Wert aus einer optionalen --brand-*-Variable.
   Wird kein --brand-* in project.css definiert, greift der monochrome Default.
   So läuft der Starter sofort, sieht aber bewusst "noch ungebrandet" aus.
   /impeccable document füllt --brand-* in project.css; tokens.css bleibt unberührt.
   ========================================================================== */

:root {
  /* ---------- Farben ---------- */
  --color-bg:         var(--brand-bg,         oklch(99% 0 0));
  --color-surface:    var(--brand-surface,    oklch(96% 0 0));
  --color-text:       var(--brand-text,       oklch(18% 0 0));
  --color-muted:      var(--brand-muted,      oklch(50% 0 0));
  --color-line:       var(--brand-line,       oklch(85% 0 0));
  --color-accent:     var(--brand-accent,     oklch(40% 0 0));
  --color-accent-ink: var(--brand-accent-ink, oklch(99% 0 0));
  --color-on-dark:    var(--brand-on-dark,    oklch(99% 0 0));

  /* ---------- Typografie ---------- */
  --font-display: var(--brand-display, "Inter", system-ui, -apple-system, sans-serif);
  --font-body:    var(--brand-body,    "Inter", system-ui, -apple-system, sans-serif);

  /* fluide Modular-Scale (1.250 mobile -> 1.333 desktop) */
  --type-eyebrow: var(--brand-type-eyebrow, clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem));
  --type-body:    var(--brand-type-body,    clamp(1rem, 0.95rem + 0.3vw, 1.125rem));
  --type-lead:    var(--brand-type-lead,    clamp(1.125rem, 1rem + 0.5vw, 1.375rem));
  --type-h3:      var(--brand-type-h3,      clamp(1.375rem, 1.15rem + 1vw, 2rem));
  --type-h2:      var(--brand-type-h2,      clamp(2rem, 1.5rem + 2.2vw, 3.5rem));
  --type-h1:      var(--brand-type-h1,      clamp(3rem, 2rem + 5vw, 7rem));

  --weight-regular: var(--brand-weight-regular, 400);
  --weight-medium:  var(--brand-weight-medium,  500);
  --weight-bold:    var(--brand-weight-bold,    700);

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ---------- Spacing-Skala (4-er Schritte) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Section-Rhythmus */
  --section-padding-block: var(--brand-section-padding, clamp(4rem, 8vw, 8rem));

  /* ---------- Layout ---------- */
  --wrap-max:     var(--brand-wrap-max, 100%);
  --wrap-padding: var(--brand-wrap-padding, clamp(1.25rem, 4vw, 4rem));
  --grid-gap:     var(--brand-grid-gap, 1rem);

  /* ---------- Radius + Schatten ---------- */
  --radius-s:  var(--brand-radius-s,  0.25rem);
  --radius-m:  var(--brand-radius-m,  0.5rem);
  --radius-l:  var(--brand-radius-l,  1rem);
  --radius-pill: 999px;

  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-m: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   180ms;
  --duration-normal: 320ms;
  --duration-slow:   560ms;

  /* ---------- Z-Layers ---------- */
  --z-base:   1;
  --z-sticky: 50;
  --z-modal:  100;
  --z-toast:  200;
}

/* ---------- Dark Mode automatisch via prefers-color-scheme ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         var(--brand-bg-dark,         oklch(15% 0 0));
    --color-surface:    var(--brand-surface-dark,    oklch(20% 0 0));
    --color-text:       var(--brand-text-dark,       oklch(96% 0 0));
    --color-muted:      var(--brand-muted-dark,      oklch(65% 0 0));
    --color-line:       var(--brand-line-dark,       oklch(30% 0 0));
    --color-accent:     var(--brand-accent-dark,     oklch(75% 0 0));
    --color-accent-ink: var(--brand-accent-ink-dark, oklch(15% 0 0));
    --color-on-dark:    var(--brand-on-dark-dark,    oklch(99% 0 0));
  }
}

/* ---------- Dark Mode per Toggle (überschreibt Auto) ---------- */
[data-theme="dark"] {
  --color-bg:         var(--brand-bg-dark,         oklch(15% 0 0));
  --color-surface:    var(--brand-surface-dark,    oklch(20% 0 0));
  --color-text:       var(--brand-text-dark,       oklch(96% 0 0));
  --color-muted:      var(--brand-muted-dark,      oklch(65% 0 0));
  --color-line:       var(--brand-line-dark,       oklch(30% 0 0));
  --color-accent:     var(--brand-accent-dark,     oklch(75% 0 0));
  --color-accent-ink: var(--brand-accent-ink-dark, oklch(15% 0 0));
  --color-on-dark:    var(--brand-on-dark-dark,    oklch(99% 0 0));
}

/* ---------- Light Mode per Toggle (überschreibt Auto-Dark) ---------- */
[data-theme="light"] {
  --color-bg:         var(--brand-bg,         oklch(99% 0 0));
  --color-surface:    var(--brand-surface,    oklch(96% 0 0));
  --color-text:       var(--brand-text,       oklch(18% 0 0));
  --color-muted:      var(--brand-muted,      oklch(50% 0 0));
  --color-line:       var(--brand-line,       oklch(85% 0 0));
  --color-accent:     var(--brand-accent,     oklch(40% 0 0));
  --color-accent-ink: var(--brand-accent-ink, oklch(99% 0 0));
  --color-on-dark:    var(--brand-on-dark,    oklch(99% 0 0));
}