/* ─────────────────────────────────────────────────────────────────────
   Lexnesia — Stately Navy tokens (locked direction, May 2026)
   Drop this stylesheet at the top of your CSS pipeline and consume the
   custom properties everywhere. All colors, type, spacing, radii, and
   shadows are below. Source of truth: handoff/source/tokens.jsx
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Inks ────────────────────────────────────────────────────────── */
  --lex-ink:           #0E1B33; /* primary brand ink + text on light    */
  --lex-ink-soft:      #1F2D4D; /* headings on cream                    */
  --lex-ink-deep:      #091428; /* deepest navy — header / footer / dock */

  /* ── Paper / cream stack (committed warm paper, not pale cream) ──── */
  --lex-cream:         #F1EBDC; /* page background                       */
  --lex-cream-soft:    #E6DEC8; /* raised surface / hover row / sidebar  */
  --lex-cream-mid:     #D8CFB5; /* selected row / divider                */
  --lex-paper:         #FBF8F2; /* active card / answer pane             */
  --lex-paper-warm:    #F8F2E5; /* soft alt card                         */

  /* ── Lines ───────────────────────────────────────────────────────── */
  --lex-line:          #D6CDB7; /* subtle internal lines                 */
  --lex-line-2:        #BFB497; /* panel edges                           */
  --lex-line-3:        #9A8E6E; /* emphasis lines (rare)                 */
  --lex-line-on-dark:  rgba(241, 235, 220, 0.16);

  /* ── Text ────────────────────────────────────────────────────────── */
  --lex-text:          #1A2238; /* deep navy-ink for body copy           */
  --lex-text-2:        #4F5870; /* secondary                             */
  --lex-text-3:        #7E8398; /* tertiary / meta                       */

  /* ── Gold accent ladder (primary CTA + selection) ────────────────── */
  --lex-accent:        #A87327; /* gold leaf — primary accent            */
  --lex-accent-deep:   #7C5316; /* hover / active                        */
  --lex-accent-soft:   #EFDFB8; /* selected tint / focus ring bg         */
  --lex-accent-light:  #F8EED4; /* very soft tint / hover row            */

  /* ── Citation oxblood (SCOPED: citations + active highlights only) ─ */
  --lex-cite:          #7E1A1A;
  --lex-cite-soft:     #F2E2E2;

  /* ── Status ──────────────────────────────────────────────────────── */
  --lex-success:       #2F6A3A;
  --lex-warn:          #A0731A;
  --lex-danger:        #7E1A1A;

  /* ── Header / footer / dock surfaces ─────────────────────────────── */
  --lex-header-bg:     var(--lex-ink-deep);
  --lex-header-ink:    var(--lex-cream);
  --lex-sidebar-bg:    var(--lex-cream-soft);
  --lex-sidebar-ink:   var(--lex-ink);
  --lex-sidebar-row-hover:  #EFE6CE;
  --lex-sidebar-row-active: var(--lex-cream-mid);
  --lex-answer-bg:     var(--lex-paper);
  --lex-answer-ink:    var(--lex-ink);
  --lex-footer-bg:     var(--lex-ink-deep);
  --lex-footer-ink:    rgba(241, 235, 220, 0.72);

  /* ── Type families ───────────────────────────────────────────────── */
  --lex-font-display:  'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --lex-font-serif:    'Source Serif 4', 'Source Serif Pro', 'Libre Caslon Text', Georgia, serif;
  --lex-font-sans:     'Inter Tight', 'Inter', system-ui, sans-serif;
  --lex-font-mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ── Type scale (size · weight · line-height · tracking) ─────────── */
  /* Display — used sparingly: hero, section openers, marketing moments */
  --lex-fs-hero:       88px;  --lex-lh-hero:    0.98;  --lex-ls-hero:    -0.02em;
  --lex-fs-display:    64px;  --lex-lh-display: 1.02;  --lex-ls-display: -0.018em;
  /* Heading — workhorse for in-app                                    */
  --lex-fs-h1:         36px;  --lex-lh-h1:      1.18;  --lex-ls-h1:      -0.012em;
  --lex-fs-h2:         26px;  --lex-lh-h2:      1.25;  --lex-ls-h2:      -0.008em;
  --lex-fs-h3:         19px;  --lex-lh-h3:      1.35;  --lex-ls-h3:      -0.004em;
  /* Body                                                              */
  --lex-fs-lead:       19px;  --lex-lh-lead:    1.55;
  --lex-fs-body:       15px;  --lex-lh-body:    1.65;
  --lex-fs-body-sm:    13px;  --lex-lh-body-sm: 1.55;
  /* UI chrome (buttons, chips, labels) — sans for legibility          */
  --lex-fs-ui-lg:      14px;  --lex-fw-ui:      600;
  --lex-fs-ui:         13px;
  --lex-fs-ui-sm:      12px;
  --lex-fs-caps:       11px;  --lex-fw-caps:    700;   --lex-ls-caps:    0.12em;

  /* ── Spacing scale (4-pt grid) ───────────────────────────────────── */
  --lex-space-xs:      4px;
  --lex-space-sm:      8px;
  --lex-space-md:      12px;
  --lex-space-lg:      16px;
  --lex-space-xl:      24px;
  --lex-space-2xl:     32px;
  --lex-space-3xl:     48px;
  --lex-space-4xl:     64px;
  --lex-space-5xl:     96px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --lex-radius-sm:     4px;
  --lex-radius-md:     8px;
  --lex-radius-lg:     12px;
  --lex-radius-xl:     18px;
  --lex-radius-full:   999px;

  /* ── Shadows (restrained — no glow) ──────────────────────────────── */
  --lex-shadow-hair:   0 0 0 1px rgba(0, 0, 0, 0.04);
  --lex-shadow-rest:   0 1px 2px rgba(20, 18, 14, 0.04), 0 1px 0 rgba(20, 18, 14, 0.02);
  --lex-shadow-raised: 0 6px 24px -8px rgba(20, 18, 14, 0.12), 0 2px 4px rgba(20, 18, 14, 0.04);
  --lex-shadow-modal:  0 24px 60px -12px rgba(10, 12, 20, 0.28), 0 8px 16px rgba(10, 12, 20, 0.08);

  /* ── Hero behavior (chosen state — empty) ────────────────────────── */
  --lex-hero-mask: linear-gradient(180deg,
                     rgba(14,27,51,0)    0%,
                     rgba(14,27,51,.05) 30%,
                     rgba(14,27,51,.32) 65%,
                     rgba(14,27,51,.62) 100%);
  --lex-hero-empty-opacity:  0.62;
  --lex-hero-active-opacity: 0.10; /* watermark on reading/answer states */
}

/* ─────────────────────────────────────────────────────────────────────
   Type utility classes (optional — drop-in helpers for common roles)
   ───────────────────────────────────────────────────────────────────── */
.lex-hero    { font-family: var(--lex-font-display); font-size: var(--lex-fs-hero);    font-weight: 500; font-style: italic; line-height: var(--lex-lh-hero);    letter-spacing: var(--lex-ls-hero); color: var(--lex-ink); }
.lex-display { font-family: var(--lex-font-display); font-size: var(--lex-fs-display); font-weight: 500; line-height: var(--lex-lh-display); letter-spacing: var(--lex-ls-display); }
.lex-h1      { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-h1);      font-weight: 600; line-height: var(--lex-lh-h1);      letter-spacing: var(--lex-ls-h1); }
.lex-h2      { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-h2);      font-weight: 600; line-height: var(--lex-lh-h2);      letter-spacing: var(--lex-ls-h2); }
.lex-h3      { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-h3);      font-weight: 600; line-height: var(--lex-lh-h3);      letter-spacing: var(--lex-ls-h3); }
.lex-lead    { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-lead);    font-weight: 400; line-height: var(--lex-lh-lead); }
.lex-body    { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-body);    font-weight: 400; line-height: var(--lex-lh-body); }
.lex-body-sm { font-family: var(--lex-font-serif);   font-size: var(--lex-fs-body-sm); font-weight: 400; line-height: var(--lex-lh-body-sm); }
.lex-ui-lg   { font-family: var(--lex-font-sans);    font-size: var(--lex-fs-ui-lg);   font-weight: 600; line-height: 1.2; }
.lex-ui      { font-family: var(--lex-font-sans);    font-size: var(--lex-fs-ui);      font-weight: 600; line-height: 1.2; }
.lex-ui-sm   { font-family: var(--lex-font-sans);    font-size: var(--lex-fs-ui-sm);   font-weight: 600; line-height: 1.2; }
.lex-caps    { font-family: var(--lex-font-sans);    font-size: var(--lex-fs-caps);    font-weight: 700; line-height: 1.2; letter-spacing: var(--lex-ls-caps); text-transform: uppercase; }