/* innerlumio design tokens.

   Source of truth: docs/Brand-tokens.md (colour) and the #109 type handoff in
   docs/brand-specimens/Czech prose typeface selection/README.md (type, measure,
   spacing). Values here are copies of decided values — change them there first.

   Two layers, and the split is load-bearing:

   1. PRIMITIVES — raw brand values. Never referenced by a component.
   2. SEMANTIC   — role names. The only thing components are allowed to use.

   That indirection is what makes a theme a value swap rather than a rewrite.
   `.surface-navy` below proves it: it re-declares the same semantic names to
   the navy column of the Brand-tokens.md table and every component inside it
   inverts with no component-level change. Dark mode is deliberately NOT
   shipped (Decisions.md 2026-07-30) — but this is the mechanism it would use. */

:root {
  /* ---------------------------------------------------------------- *
   * 1. Primitives — do not use these outside the semantic layer below *
   * ---------------------------------------------------------------- */

  --navy-900: #061428; /* navy-on-navy surfaces */
  --navy-800: #13243e; /* the brand navy */
  --navy-700: #263854; /* dividers on navy */

  --paper: #f8f4ed; /* the brand light surface */
  --paper-dim: #ede7de; /* sunken/alternate light surface */

  --gold-700: #996311; /* the only gold safe as body text (4.62:1) */
  --gold-600: #bc7a18; /* accent on light surfaces */
  --gold-400: #f8a223; /* accent on navy surfaces */

  /* Warm neutral ramp, hue-matched to the paper (OKLCH h80) so greys sit in
     the family instead of reading as a foreign cool grey. */
  --neutral-050: #f7f5f1;
  --neutral-100: #eeebe5;
  --neutral-200: #dbd7d0;
  --neutral-300: #bfbab2;
  --neutral-400: #9d978f;
  --neutral-500: #7f7a71;
  --neutral-600: #615d56;
  --neutral-700: #46423b;
  --neutral-800: #2e2b26;
  --neutral-900: #181612;

  --error-light: #d52824; /* 4.61:1 on paper */
  --error-navy: #f37c6f; /* 5.87:1 on navy */
  --success-light: #1f7e3f; /* 4.66:1 on paper */
  --success-navy: #52ce75; /* 7.74:1 on navy */
  --focus-light: #198cea; /* 3.20:1 on paper */
  --focus-navy: #5caaf6; /* 6.32:1 on navy */
  --border-strong-light: #8f8c88; /* 3.05:1 on paper */
  --border-strong-navy: #5d708c; /* 3.08:1 on navy */

  /* ------------------------------------------------- *
   * 2. Semantic layer — the only colours components use *
   * ------------------------------------------------- */

  --surface: var(--paper);
  --surface-alt: var(--paper-dim);
  --on-surface: var(--navy-800);
  --on-surface-muted: var(--neutral-600);
  --accent: var(--gold-600);
  --accent-text: var(--gold-700);
  --link: var(--gold-600);
  --link-hover: var(--navy-800);
  --button-fill: var(--navy-800);
  --on-button: var(--paper);
  /* Hover is a second fill, not an opacity shift, because both fills carry
     text and the pair has to be measured: paper on navy-900 is 16.83:1. */
  --button-fill-hover: var(--navy-900);
  --on-button-hover: var(--paper);
  --divider: var(--neutral-200);
  --border-strong: var(--border-strong-light);
  --focus: var(--focus-light);
  --error: var(--error-light);
  --success: var(--success-light);

  /* ------------------- *
   * 3. Type — #109 scale *
   * ------------------- */

  --font-prose:
    "Alegreya", "Alegreya Fallback", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --font-ui: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: 48px;
  --lh-h1: 1.12;
  --ls-h1: -0.005em;
  --fs-lead: 26px;
  --lh-lead: 1.34;
  --fs-h2: 30px;
  --lh-h2: 1.24;
  --fs-h3: 23px;
  --lh-h3: 1.3;
  --fs-body: 20px;
  --lh-body: 1.6; /* Czech leading floor: below ~1.5 carons crowd descenders */
  --fs-quote: 24px;
  --lh-quote: 1.42;
  --fs-small: 17px; /* absolute floor for anything meant to be read */
  --lh-small: 1.55;
  --fs-ui: 15px;
  --lh-ui: 1.3;
  --fs-eyebrow: 11px;
  --lh-eyebrow: 1.4;
  --ls-eyebrow: 0.18em;
  --fs-caption: 12px;
  --lh-caption: 1.66;

  /* ------------------------------------------------------ *
   * 4. Space, measure, line, motion — decided while building *
   * ------------------------------------------------------ */

  /* Spacing scale, adopted from the #109 handoff §3 rather than re-invented. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 26px;
  --s7: 34px;
  --s8: 44px;
  --s9: 56px;
  --s10: 72px;
  --s11: 88px;

  /* Measure and containers. Prose is capped twice: 66ch is the target, 34em
     the hard stop once the face renders wide. */
  --measure: 66ch;
  --measure-max: 34em;
  /* One column for the whole shell — header, main and footer share a width so
     the wordmark aligns with the text below it. 44rem lands within a pixel or
     two of the prose measure at the shipped body size. */
  --page-max: 44rem;
  --gutter: 24px;

  /* Radius: square everywhere; 2px on controls only. "No rounded-card
     treatments" — #109 handoff §6. */
  --radius-0: 0;
  --radius-control: 2px;

  /* Border widths. */
  --bw-hair: 1px; /* dividers, input borders */
  --bw-rule: 2px; /* section tops, pull-quote rule */
  --bw-focus: 2px;

  /* Elevation: none. No shadows, no gradients — separation is carried by a
     surface change or a rule. Declared so the absence is deliberate and a
     component can't quietly invent one. */
  --elevation: none;

  /* Motion: colour and opacity only, one duration, no transforms. */
  --motion-duration: 150ms;
  --motion-easing: ease-out;
}

/* Mobile step of the type scale. The 480px breakpoint comes from the #109
   handoff; 768px (nav layout) is the only other one, and lives in base.css. */
@media (max-width: 480px) {
  :root {
    --fs-h1: 34px;
    --lh-h1: 1.16;
    --fs-lead: 21px;
    --lh-lead: 1.4;
    --fs-h2: 26px;
    --lh-h2: 1.26;
    --fs-h3: 21px;
    --lh-h3: 1.32;
    --fs-body: 18px;
    --fs-quote: 21px;
    --lh-quote: 1.44;
  }
}

/* The navy surface. Same semantic names, the other column of the
   Brand-tokens.md table. Set `background`/`color` here so nesting it anywhere
   just works. */
.surface-navy {
  --surface: var(--navy-800);
  --surface-alt: var(--navy-900);
  --on-surface: var(--paper);
  --on-surface-muted: var(--neutral-300);
  --accent: var(--gold-400);
  --accent-text: var(--gold-400);
  --link: var(--gold-400);
  --link-hover: var(--paper);
  --button-fill: var(--gold-400);
  --on-button: var(--navy-800);
  /* Not a darker gold: navy on gold-600 is 4.40:1, which misses 4.5. Paper is
     the only fill on this surface that both reads as a state change and keeps
     the label compliant (navy on paper, 14.19:1). */
  --button-fill-hover: var(--paper);
  --on-button-hover: var(--navy-800);
  --divider: var(--navy-700);
  --border-strong: var(--border-strong-navy);
  --focus: var(--focus-navy);
  --error: var(--error-navy);
  --success: var(--success-navy);

  background-color: var(--surface);
  color: var(--on-surface);
}