@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;
    /* UI-050 page colour (decision Daniel 12.10.2026, value kept including its alpha). The body paints it over the
       browser's white canvas; --page-solid is that rendered result for surfaces that must cover content (sticky bars,
       rings, editorial bands), so the translucent value is never stacked or shown through. */
    --page: #f6f1e48a;
    --page-solid: #FAF7F0;
    --surface: #FFFFFF;
    --print-paper: #FFFFFF;
    --surface-muted: #FBFBF7;
    --surface-strong: #F6F2E9;
    /* BUG-035 A: a band that carries one white feature card shows the page colour in light, so the card stands out;
       dark keeps the muted band. */
    --band-behind-card: transparent;
    /* 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;
    /* Form boundaries need non-text contrast; decorative card borders stay separate. */
    --input-border: #7D838E;
    --accent-text: #806326;
    --success: #2F6F50;
    --success-soft: rgba(47, 111, 80, .08);
    --success-border: #95B0A4;
    --warning: #9A4F18;
    --warning-soft: rgba(154, 79, 24, .10);
    --warning-strong: rgba(154, 79, 24, .22);
    --danger: #9B3F45;
    --danger-soft: rgba(155, 63, 69, .08);
    --danger-border: #C29C9F;
    --info: #356386;
    --info-soft: rgba(53, 99, 134, .08);
    --info-border: #97ABBA;
    /* Original glossary learning hues (r337 styles.v2536.css, .r4x-depth-*).
       Other roles reuse info/danger/warning and canonical v18 gold. */
    --learning-context: #0875A7;
    --learning-relevance: #6240C2;
    --learning-relevance-soft: rgba(98, 64, 194, .08);
    --learning-relevance-border: rgba(98, 64, 194, .35);
    --learning-watch: #0D7B72;
    /* r337 glossary CATEGORY_ACCENTS; the former custom gold uses FINAL v18. */
    --category-basics: var(--gold);
    --category-technology: #4F73B7;
    --category-markets: #4F896D;
    --category-security: #AD5656;
    --category-defi: #3F88AD;
    --category-infrastructure: #7A6BB0;
    --category-psychology: #A56B8D;
    --category-psychology-soft: rgba(165, 107, 141, .18);
    --category-governance: #8A6A42;
    --category-metaverse: #8B6BB8;
    --category-regulation: #77705F;
    --category-nft: #5E8D87;
    /* UI-013 (r337 news premium v739): gold marks crypto news, blue marks traditional markets. */
    --news-crypto: var(--accent-text);
    --news-market: #2F6698;
    --news-market-soft: rgba(47, 102, 152, .08);
    --news-market-border: rgba(47, 102, 152, .38);
    /* UI-008/UI-009: r337 discovery navy (r4x-cockpit-home-sections v2970), shared by both themes. */
    --navy-page: #09121F;
    --navy-surface: #0D1626;
    --navy-border: rgb(105 137 194 / .40);
    --navy-glow: rgb(76 109 174 / .22);
    --navy-line: #6989C2;
    /* UI-026: r337 dossier paper for Beginner case files and the completion story (light in both themes). */
    --paper: #FFFBF1;
    --paper-strong: #FFF4DC;
    --paper-ink: #20160A;
    --paper-muted: #463927;
    --paper-accent: #8A5A13;
    --paper-border: rgb(185 139 44 / .34);
    --brand-page: #000000;
    --brand-surface: #101010;
    /* BUG-036 (decision Daniel 12.10.2026): the open tool in the always dark menu, r337 shared-header .hamburger-current-tool. */
    --nav-current-tool: #F0A43A;
    --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-info: #8DB9DC;
    --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;
    /* UI-042: filled silver from the fixed v18 neutral inks; shared by both surfaces/themes. */
    --action-free: color-mix(in srgb, var(--tool-text) 18%, var(--tool-surface));
    --action-free-hover: color-mix(in srgb, var(--tool-text) 10%, var(--tool-surface));
    --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;
  }
  /* The brand chrome (header, info bar, area bar, bottom bar, menu, footer) is dark in both themes and carries
     data-theme-scope="dark" (decision Daniel 12.10.2026: header colours and behaviour never differ between themes). */
  html[data-theme='dark'],
  [data-theme-scope='dark'] {
    /* Dark surfaces "Graphit" (decision Daniel 03.10.2026); the page colour itself follows UI-050 (12.10.2026). */
    --page: #0e1420;
    --page-solid: var(--page);
    --surface: #181A1F;
    --surface-muted: #131519;
    --surface-strong: #20232A;
    --band-behind-card: var(--surface-muted);
    --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;
    --input-border: #737984;
    --accent-text: var(--gold-hover);
    --success: #87C9A4;
    --success-soft: rgba(135, 201, 164, .08);
    --success-border: #476354;
    --warning: #F0AE73;
    --warning-soft: rgba(240, 174, 115, .10);
    --warning-strong: rgba(240, 174, 115, .22);
    --danger: #EF979D;
    --danger-soft: rgba(239, 151, 157, .08);
    --danger-border: #734E51;
    --info: #8DB9DC;
    --info-soft: rgba(141, 185, 220, .08);
    --info-border: #4A5C6B;
    --learning-context: color-mix(in srgb, #0875A7 35%, var(--brand-text));
    --learning-relevance: color-mix(in srgb, #6240C2 35%, var(--brand-text));
    --learning-relevance-soft: rgba(194, 182, 224, .08);
    --learning-relevance-border: rgba(194, 182, 224, .35);
    --learning-watch: color-mix(in srgb, #0D7B72 35%, var(--brand-text));
    --news-market: #5B9BD5;
    --news-market-soft: rgba(91, 155, 213, .10);
    --news-market-border: rgba(91, 155, 213, .38);
    --shadow-card: 0 10px 28px rgb(0 0 0 / .25);
    --shadow-elevated: 0 18px 42px rgb(0 0 0 / .36);
    /* The Beginner canvas keeps its Graphit end stop; UI-050 changes only the page colour. */
    --beginner-canvas: radial-gradient(circle at top, var(--surface-strong) 0, var(--surface) 52%, #0F1013 100%);
    color-scheme: dark;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-base: 0ms; }
  }
}