@layer tokens, base, components, layout;

@layer tokens {
  :root,
  [data-theme-scope='light'] {
    --gold: #C9A961;
    --gold-hover: #D8BD75;
    --gold-deep: #A8884A;
    --gold-soft: rgb(201 169 97 / .10);
    --gold-border: rgb(201 169 97 / .42);
  --eyebrow-rule: #9aa4bb;
    --page: #F0EEE8;
    --surface: #FFFFFF;
    --print-paper: #FFFFFF;
    --surface-muted: #FBFBF7;
    --surface-strong: #F6F2E9;
    /* Brand header strip: the content surface in light, brand black in dark (stays black with the Graphit surfaces). */
    --header-surface: var(--surface);
    --text: #151922;
    --text-muted: #565D6A;
    /* r44 (r35 V01): #7A7D82 reached only 3.5–4.1:1 for small text on the light surfaces; now ≥ 4.5:1 on page,
       surface, surface-muted, surface-strong and gold-soft, still a step lighter than --text-muted. */
    --text-faint: #686B71;
    --border: rgb(21 25 34 / .14);
    --border-soft: rgb(21 25 34 / .08);
    --input: #FFFFFF;
    --accent-text: #806326;
    --success: #2F6F50;
    --success-soft: rgba(47, 111, 80, .08);
    --success-border: #95B0A4;
    --warning: #80601C;
    --danger: #9B3F45;
    --danger-soft: rgba(155, 63, 69, .08);
    --danger-border: #C29C9F;
    --info: #356386;
    --info-soft: rgba(53, 99, 134, .08);
    --info-border: #97ABBA;
    --brand-page: #000000;
    --brand-surface: #101010;
    --footer-page: #10121A;
    --footer-surface: #15171F;
    --brand-text: #F5F5F0;
    --brand-muted: #B5B5B0;
    --brand-border: rgb(245 245 240 / .18);
    /* Status dots on the always dark brand chrome (info bar, r39): the dark-theme status tones in both themes. */
    --brand-success: #87C9A4;
    --brand-warning: #DFBD68;
    --button-text: #0B0C0F;
    --tool-surface: #FFFFFF;
    /* Text on the always white tool tile (both themes): dark ink and the light-theme accent gold. */
    --tool-text: #151922;
    --tool-accent-text: #806326;
    --tool-border: rgb(20 24 30 / .18);
    --tool-shadow: 0 2px 7px rgb(0 0 0 / .10);
    --overlay: rgb(0 0 0 / .62);
    --radius-button: 5px;
    --radius-control: 10px;
    --radius-card: 14px;
    --radius-pill: 999px;
    --radius-badge: 4px;
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --shadow-card: 0 10px 28px rgb(31 28 22 / .06);
    --shadow-elevated: 0 18px 42px rgb(31 28 22 / .10);
    --desktop-max: 1440px;
    --desktop-pad: 24px;
    --mobile-pad: 16px;
    --reading-max: 72ch;
    --touch-target: 44px;
    --font-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-beginner: 'Cormorant Garamond', Georgia, serif;
    --beginner-canvas: radial-gradient(circle at top, #FAF8F2 0, #F0EEE8 52%, #E7E3DA 100%);
    --z-base: 0;
    --z-sticky: 100;
    --z-nav: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-toast: 500;
    --motion-fast: 120ms;
    --motion-base: 180ms;
    --ease-standard: cubic-bezier(.2,.7,.2,1);
    color-scheme: light;
  }
  html[data-theme='dark'] {
    /* Dark background variant B "Graphit" (decision Daniel 03.10.2026, docs/v18-abweichungen.md). */
    --page: #0F1013;
    --surface: #181A1F;
    --surface-muted: #131519;
    --surface-strong: #20232A;
    --header-surface: var(--brand-page);
    --text: #F5F5F0;
    --text-muted: rgb(245 245 240 / .72);
    --text-faint: rgb(245 245 240 / .55);
    --border: rgb(255 255 255 / .12);
    --border-soft: rgb(255 255 255 / .07);
    --input: #121419;
    --accent-text: var(--gold-hover);
    --success: #87C9A4;
    --success-soft: rgba(135, 201, 164, .08);
    --success-border: #476354;
    --warning: #DFBD68;
    --danger: #EF979D;
    --danger-soft: rgba(239, 151, 157, .08);
    --danger-border: #734E51;
    --info: #8DB9DC;
    --info-soft: rgba(141, 185, 220, .08);
    --info-border: #4A5C6B;
    --shadow-card: 0 10px 28px rgb(0 0 0 / .25);
    --shadow-elevated: 0 18px 42px rgb(0 0 0 / .36);
    --beginner-canvas: radial-gradient(circle at top, var(--surface-strong) 0, var(--surface) 52%, var(--page) 100%);
    color-scheme: dark;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-base: 0ms; }
  }
}