/* Seeds and Wonder, Design Tokens v3-1
   Refinement layer over v3. The taste pass.

   Philosophy: tighter palette, one display face used at one size,
   marginalia over badges, hairlines over card chrome, colophon over
   telemetry. See 03-projects/seeds-and-wonder/design-philosophy.md.

   Token classes preserved from v3:
     LOCKED  --lk-* never flip with prefers-color-scheme
     THEMED  bare semantic, paired bg + ink for WCAG AA

   Contrast contract (verified by preview/contrast.py, body text 4.5:1,
   functional rules 3.0:1, all 28 pairs PASS):

     --ink            on  --paper          15.6 light / 14.9 dark
     --ink-soft       on  --paper           8.6 light /  9.8 dark
     --muted          on  --paper           5.8 light /  5.7 dark
     --accent         on  --paper           6.3 light /  7.8 dark
     --link           on  --paper           7.1 light / 10.2 dark
     --danger         on  --paper           6.3 light /  7.8 dark

     --ink            on  --paper-inset    13.9 light / 13.4 dark
     --ink-soft       on  --paper-inset     7.6 light /  8.7 dark
     --accent         on  --paper-inset     5.6 light /  7.0 dark

     --rule           on  --paper           3.2 light /  3.8 dark  (functional)
     --rule-soft      on  --paper          ~1.5 (decorative only)

     --lk-fg-on-feature      on --lk-bg-feature   15.7 (locked)
     --lk-fg-soft-on-feature on --lk-bg-feature   10.9 (locked)
     --lk-meta-on-feature    on --lk-bg-feature    9.5 (locked)
     --lk-accent-on-feature  on --lk-bg-feature    7.5 (locked)
*/

:root {
  /* ===== LOCKED ===== */
  /* The hero panel is the single feature surface that survives the cut. */
  --lk-bg-feature:        #0E1F2C;
  --lk-bg-feature-soft:   #1B2D3D;
  --lk-fg-on-feature:     #FBF7EE;
  --lk-fg-soft-on-feature:#D9CFB8;
  --lk-meta-on-feature:   #B8C5CC;
  --lk-accent-on-feature: #C9A961;
  --lk-cream:             #FBF7EE;
  --lk-ink-on-cream:      #0E1F2C;

  /* ===== PAPER (THEMED, light default) ===== */
  /* Two inks, one paper, one paper-inset. That is the discipline. */
  --paper:           #FBF6E9;
  --paper-inset:     #F1E9D2;
  --ink:             #0E1F2C;
  --ink-soft:        #3B4956;
  --muted:           #58626B;

  /* Single accent, used only for marginalia and focus and rule-marks
     where they earn the warmth. Never as a fill. */
  --accent:          #785512;
  --link:            #0B5E55;
  --danger:          #A6303D;

  /* Hairline, the workhorse.
     --rule is for functional borders (glance card, photo-cta frame); 3:1.
     --rule-soft is for decorative section dividers; intentionally quieter.
     Section separation is also carried by whitespace and typography. */
  --rule:            #988868;
  --rule-soft:       #D9CFB1;
  --focus-ring:      #785512;

  /* ===== TYPOGRAPHY ===== */
  /* One display face. Used at exactly one size: --fs-display.
     Used at exactly two locations: hero h1 and the verse pull.
     Anywhere else, body face. That is the contract. */
  --font-display:  "Playfair Display", Georgia, serif;
  --font-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Tighter scale than v3. Display is one size. Body steps modest. */
  --fs-micro:    clamp(0.70rem, 0.68rem + 0.10vw, 0.76rem);
  --fs-small:    clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --fs-body:     clamp(1.00rem, 0.96rem + 0.20vw, 1.08rem);
  --fs-h3:       clamp(1.12rem, 1.06rem + 0.30vw, 1.24rem);
  --fs-h2:       clamp(1.30rem, 1.18rem + 0.60vw, 1.55rem);
  --fs-display:  clamp(2.00rem, 1.55rem + 2.20vw, 2.80rem);

  --lh-tight:    1.12;
  --lh-snug:     1.30;
  --lh-body:     1.58;

  /* Letter-spacing tokens for small caps and labels */
  --tracking-label: 0.14em;
  --tracking-tight: -0.012em;

  /* ===== SPACING (4px base) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  36px;
  --sp-7:  56px;
  --sp-8:  84px;

  /* ===== RADII ===== */
  /* Almost all surfaces are flat. r-md reserved for the hero glance card
     and the photo CTA. */
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;

  /* ===== ELEVATION ===== */
  /* Effectively none. v3 carried three shadow levels. v3-1 keeps one
     reserved for the glance card overlap onto the hero, used nowhere else. */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(14,31,44,0.05), 0 6px 14px rgba(14,31,44,0.06);

  /* ===== MOTION ===== */
  /* Quiet motion. Tab toggle, color shift on hover. No transforms. */
  --dur-fast: 100ms;
  --dur-base: 160ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.4, 1);

  /* ===== TARGETS, GRID, READING ===== */
  --tap-min:        44px;
  --content-max:    760px;
  --reading-max:    62ch;
  --reading-mobile: 36ch;

  /* Grid system, used by the page container */
  --col-gap:        var(--sp-5);
  --row-gap:        var(--sp-6);
}

/* ===== DARK ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #0F1A22;
    --paper-inset:  #18242E;
    --ink:          #F1ECDB;
    --ink-soft:     #B8C2CB;
    --muted:        #8794A0;

    --accent:       #C9A961;
    --link:         #7CD4C7;
    --danger:       #FF8A95;

    --rule:         #637788;
    --rule-soft:    #2A3949;
    --focus-ring:   #C9A961;

    --elev-1: 0 1px 2px rgba(0,0,0,0.45), 0 8px 18px rgba(0,0,0,0.40);
  }
}

/* Manual override (for screenshot harness, theme toggle) */
[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #0F1A22;
  --paper-inset:  #18242E;
  --ink:          #F1ECDB;
  --ink-soft:     #B8C2CB;
  --muted:        #8794A0;
  --accent:       #C9A961;
  --link:         #7CD4C7;
  --danger:       #FF8A95;
  --rule:         #637788;
  --rule-soft:    #2A3949;
  --focus-ring:   #C9A961;
  --elev-1: 0 1px 2px rgba(0,0,0,0.45), 0 8px 18px rgba(0,0,0,0.40);
}
[data-theme="light"] { color-scheme: light; }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}

/* ===== HIGH CONTRAST ===== */
@media (prefers-contrast: more) {
  :root {
    --rule: #000000;
    --rule-soft: #555555;
  }
}