/* Hallmark · genre: editorial · macrostructure: Marquee Hero (kept) · nav: N1b · footer: Ft5 Statement
 * theme: custom "warm cream print-editorial, terracotta spot colour"
 * axes: paper-band light (L 96.5%) · display classical-serif · accent warm (hue 38)
 * paper: oklch(96.5% 0.015 85) · accent: oklch(52% 0.140 38)
 * fonts: Fraunces (Latin display) + Noto Serif TC (CJK display) + Noto Sans TC (body)
 * enrichment: Tier-B hand-built SVG (isometric + waveform), re-tinted via these tokens
 * design-system: design.md · designed-as-app
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * contrast: pass (40-41, 89 pairs verified) · nav: N1b · footer: Ft5 · slop: pass (42-45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * icons: pass (30) · mobile: pass (34, 49, 50-57 — verified 320/375/768/1440)
 * inherited (structure kept by request, not introduced here): gate 3 three-up icon
 *   cards in .values · gate 24 a few off-scale paddings in site.css · gate 39
 *   error slot has no reserved height · gate 44a hero padding-block-end is 0
 *   (the .values row is pulled up over it deliberately)
 * ---------------------------------------------------------------------------
 * Design tokens for hoost.tw. Every colour and font in site.css references a
 * name from this file. Nothing is inlined.
 *
 * The spot-colour names below are historical: --color-violet and --color-lime
 * kept their names through the 2026-08-24 reskin so that site.css and every
 * inline SVG stayed untouched. They now carry pine and olive-gold. Read them as
 * "secondary" and "punctuation", not as literal hues.
 *
 * Contrast: all 89 text/boundary pairs verified against WCAG 2.1 (body >= 4.5:1,
 * controls and focus indicators >= 3:1). The tightest are the primary button
 * label (void on accent, 4.85:1) and the olive punctuation colour (5.02:1 on
 * paper) — do not lighten --color-accent past L 52% or --color-lime past L 52%.
 */

:root {
  /* ---- Paper band: light (L 96.5%) · display: classical-serif · accent hue: warm-terracotta ---- */

  /* Surfaces. Light-mode elevation runs the other way from dark: higher
     surfaces are *brighter* than the paper they sit on, and --color-void is the
     deepest cream (page backdrop, footer fade, sunken fields), not a near-black. */
  --color-void:      oklch(93.5% 0.020 85);
  --color-paper:     oklch(96.5% 0.015 85);
  --color-paper-2:   oklch(98.3% 0.008 85);
  --color-paper-3:   oklch(99.3% 0.006 85);

  /* Ink — warm espresso ramp, tinted toward the accent per the palette rule */
  --color-ink:       oklch(25% 0.025 60);
  --color-ink-2:     oklch(41% 0.025 60);
  --color-ink-3:     oklch(48% 0.025 60);

  /* Accents — print spot colours: terracotta primary, pine secondary, olive-gold
     punctuation. All three are used as *text* in site.css, so all three clear
     4.5:1 on both paper and the raised card surface. */
  --color-accent:      oklch(52% 0.140 38);
  --color-accent-deep: oklch(45% 0.130 38);
  --color-violet:      oklch(45% 0.080 168);   /* pine */
  --color-violet-soft: oklch(55% 0.055 168);   /* pine, soft — SVG cube side faces */
  --color-lime:        oklch(52% 0.110 85);    /* olive-gold */

  /* Structure */
  --color-line:      oklch(81.5% 0.028 80);  /* hairline dividers — decorative */
  --color-line-2:    oklch(69.5% 0.042 72);  /* heavier rules — decorative */
  /* Boundary of an interactive control (input, select, ghost button). WCAG 1.4.11
     wants >= 3:1 against the surface behind it; this sits at 3.9:1 on --color-paper
     and 3.7:1 on --surface-sunken. */
  --color-control:   oklch(58% 0.030 70);
  /* Focus must read *dark* on a light page — the inverse of the dark theme. */
  --color-focus:     oklch(45% 0.140 38);

  /* Feedback — also inverted to dark for legibility on cream */
  --color-danger:    oklch(50% 0.190 28);
  --color-success:   oklch(47% 0.100 155);

  /* Translucent surfaces and tints. Named here so the page CSS never inlines a
     colour — an alpha variant is still a colour decision, not an implementation
     detail, and these are what a second project would need to port the look.
     The masthead and drawer are near-opaque warm cream, not glass: this genre's
     medium is paper. */
  --surface-glass:    oklch(96.5% 0.015 85 / 0.86);  /* stuck masthead */
  --surface-drawer:   oklch(96.5% 0.015 85 / 0.97);  /* mobile drawer */
  --surface-sunken:   oklch(93.5% 0.020 85 / 0.7);   /* form fields — recessed cream */
  --surface-card-a:   oklch(98.3% 0.008 85 / 0.9);   /* card gradient, top */
  --surface-card-b:   oklch(96.5% 0.015 85 / 0.9);   /* card gradient, bottom */
  --surface-panel:    oklch(98.3% 0.008 85 / 0.55);  /* callouts, mobile TOC */
  --surface-panel-2:  oklch(98.3% 0.008 85 / 0.5);
  --surface-footfade: oklch(93.5% 0.020 85 / 0.75);
  --scrim:            oklch(25% 0.020 60 / 0.5);     /* behind the open drawer — stays dark */

  --tint-accent-xs:   oklch(52% 0.140 38 / 0.05);  /* row hover */
  --tint-accent-sm:   oklch(52% 0.140 38 / 0.08);  /* ghost-button hover */
  /* Field focus ring. The alpha carries the contrast here: at 0.6 the composited
     ring is 2.5:1 on paper and fails 1.4.11; 0.85 puts it at 4.0:1. */
  --tint-accent-ring: oklch(52% 0.140 38 / 0.85);

  /* Atmosphere — three faint corner fields, not neon bloom. All four are the
     accent hue: the page background carries ONE colour, and the pine/olive spot
     colours stay in the content where they mean something. */
  --wash-violet:      oklch(52% 0.140 38 / 0.05);
  --wash-cyan:        oklch(52% 0.140 38 / 0.04);
  --wash-violet-2:    oklch(52% 0.140 38 / 0.04);
  --wash-band:        oklch(52% 0.140 38 / 0.07);

  /* Elevation — used only in box-shadow / filter / text-shadow, never as text
     colour. On cream these are a hairline spot-colour ring plus a soft warm
     umbra: printed-card weight, not glow. The umbra also does the work the
     card-hover shadow used to, since that rule's deepening colour resolves to
     a light cream here. */
  --glow-cyan:   0 0 0 1px oklch(52% 0.140 38 / 0.28),  0 12px 28px -14px oklch(25% 0.025 60 / 0.20);
  --glow-violet: 0 0 0 1px oklch(45% 0.080 168 / 0.30), 0 12px 28px -14px oklch(25% 0.025 60 / 0.20);
  --glow-lime:   0 0 0 1px oklch(52% 0.110 85 / 0.28),  0 12px 28px -14px oklch(25% 0.025 60 / 0.20);
  --glow-btn:      0 1px 2px oklch(25% 0.025 60 / 0.16), 0 8px 20px -12px oklch(52% 0.140 38 / 0.35);
  --glow-btn-hover:0 2px 4px oklch(25% 0.025 60 / 0.20), 0 12px 26px -10px oklch(52% 0.140 38 / 0.45);
  --glow-text:     none;   /* no neon bleed behind display type on paper */

  /* ---- Type ----
     Fraunces carries the Latin display; Noto Serif TC carries the CJK, which is
     the majority of the copy. Body stays on Noto Sans TC — a serif display over
     a humanist-sans body is the pairing, not serif-on-serif. */
  --font-display: "Fraunces", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-body:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;

  --text-xs:        0.75rem;
  --text-sm:        0.8125rem;
  --text-base:      1rem;
  --text-lg:        1.0625rem;
  --text-xl:        clamp(1.125rem, 0.30vw + 1.06rem, 1.3125rem);
  --text-2xl:       clamp(1.375rem, 0.75vw + 1.20rem, 1.75rem);
  --text-3xl:       clamp(1.625rem, 1.30vw + 1.32rem, 2.375rem);
  --text-4xl:       clamp(1.875rem, 1.80vw + 1.36rem, 2.875rem);
  /* CJK glyphs are full-width — a 7-character headline at 6rem is 672px wide.
     The ceiling here is set so the hero H1 holds one line down to ~1180px. */
  --text-display-s: clamp(1.5rem, 1.90vw + 0.86rem, 2.375rem);
  --text-display:   clamp(2.5rem, 3.20vw + 1.32rem, 4.25rem);

  --leading-tight:  1.08;
  --leading-snug:   1.32;
  --leading-body:   1.85;   /* CJK needs more air than Latin */
  --tracking-cjk:   0.015em;
  --measure:        38em;   /* ~38 CJK chars */

  /* ---- Space · 4pt scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --shell:      78rem;
  --shell-text: 46rem;

  /* ---- Rules & radii ---- */
  --rule-hair:  1px;
  --rule-thin:  1.5px;
  --rule-thick: 3px;

  /* Tighter than the dark theme's 6/10/16/22 — print corners, not app corners.
     The pill stays for buttons, which are the one deliberately soft shape. */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-xs: 120ms;
  --dur-sm: 200ms;
  --dur-md: 340ms;
  --dur-lg: 620ms;
}