/* ============================================================
   tokens.css — Design-System „Atelier Modern"
   Einzige Quelle der Wahrheit für Farbe, Typografie, Raster, Effekt.
   ============================================================ */

:root {
  /* ── Farbe · Light „Bone & Oxblood" ───────────────────── */
  --paper:        #EAE7DF;  /* kühles Bone (nicht AI-Creme)    */
  --paper-2:      #E1DDD2;  /* abgesetzte Bänder              */
  --surface:      #F3F1EA;  /* Karten, Felder, Wells           */
  --surface-2:    #E6E2D8;  /* eingelassene Flächen            */
  --ink:          #18160F;  /* Headlines / Body  (AAA)         */
  --ink-soft:     #2E2B23;  /* etwas weicher                   */
  --graphite:     #54504A;  /* Sekundärtext      (AA)          */
  --graphite-2:   #79736A;  /* Tertiär / Captions              */
  --clay:         #7A2E2A;  /* Oxblood — Primär-Akzent (AA)    */
  --clay-deep:    #5C211E;  /* Hover / Akzent-AAA              */
  --clay-wash:    #E6D8D3;  /* sehr helle Oxblood-Fläche       */
  --sage:         #3F4A50;  /* Slate — 2. Akzent (Blueprint)   */
  --sage-deep:    #2C353A;
  --hairline:     color-mix(in srgb, var(--ink) 14%, transparent);
  --hairline-2:   color-mix(in srgb, var(--ink) 8%,  transparent);
  --focus:        var(--clay);

  /* Semantische Aliase */
  --bg: var(--paper);
  --text: var(--ink);
  --muted: var(--graphite);
  --accent: var(--clay);

  /* ── Typografie ───────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Modulare Skala (Major Third 1.25) mit zwei Editorial-Sprüngen */
  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* Body  */
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);   /* Lead  */
  --step-2:  clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);    /* H3    */
  --step-3:  clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem);    /* H2    */
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 3.4rem);     /* H1    */
  --step-5:  clamp(3.2rem, 2.2rem + 5vw, 6.2rem);       /* Hero  */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.65;
  --tracking-tight: -0.02em;
  --tracking-mono:  0.08em;
  --tracking-wide:  0.18em;
  --measure: 64ch;

  /* ── Raster & Abstand (8px-System) ────────────────────── */
  --container: 78rem;
  --container-narrow: 54rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2.4vw, 2rem);
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;   --space-40: 10rem;
  --section-y: clamp(5.5rem, 11vw, 11rem);

  /* ── Form / Effekt ────────────────────────────────────── */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --border: 1px solid var(--hairline);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.45s;
  --dur-fast: 0.25s;
  --dur-slow: 0.7s;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
            0 14px 40px -16px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-lg: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent),
               0 30px 70px -24px color-mix(in srgb, var(--ink) 30%, transparent);

  /* ── Z-Index-Skala ────────────────────────────────────── */
  --z-grain: 1;
  --z-base: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-modal: 1000;

  color-scheme: light;
}

/* ── Theme „Evening" — manuell via [data-theme="evening"] ── */
:root[data-theme="evening"] {
  --paper:    #1A1714;
  --paper-2:  #131110;
  --surface:  #242019;
  --surface-2:#1C1915;
  --ink:      #EDE9E0;
  --ink-soft: #DAD5CB;
  --graphite: #C4BBB0;
  --graphite-2:#988E83;
  --clay:     #C56A52;
  --clay-deep:#D6826B;
  --clay-wash:#3A2620;
  --sage:     #8FA0AA;
  --sage-deep:#AAB8C0;
  --hairline:  color-mix(in srgb, var(--ink) 16%, transparent);
  --hairline-2:color-mix(in srgb, var(--ink) 9%,  transparent);
  --focus:    var(--clay);
  color-scheme: dark;
}

/* Automatisch „Evening", wenn System dunkel & User nicht „day" gewählt hat */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="evening"]) {
    --paper:    #1A1714;
    --paper-2:  #131110;
    --surface:  #242019;
    --surface-2:#1C1915;
    --ink:      #EDE9E0;
    --ink-soft: #DAD5CB;
    --graphite: #C4BBB0;
    --graphite-2:#988E83;
    --clay:     #C56A52;
    --clay-deep:#D6826B;
    --clay-wash:#3A2620;
    --sage:     #8FA0AA;
    --sage-deep:#AAB8C0;
    --hairline:  color-mix(in srgb, var(--ink) 16%, transparent);
    --hairline-2:color-mix(in srgb, var(--ink) 9%, transparent);
    --focus:    var(--clay);
    color-scheme: dark;
  }
}