/* Hallmark · macrostructure: Narrative Workflow · F4 step-sequence knobs: stages=9, phases=2, axis=left-rail-dated
 * theme: custom · vibe: "sea breeze, warm sand, postcard bright"
 * paper: oklch(97.5% 0.012 88) · accent: oklch(46% 0.148 240) · signal: oklch(70% 0.155 38)
 * display: Bricolage Grotesque · body: Geist · outlier: Space Mono (2 slots) · CJK: Noto Sans SC
 * axes: light / geometric-sans / cool
 * genre: playful · nav: N3 side-rail · footer: Ft8 marquee-scroll · enrichment: H9 Tier-B hand-built SVG
 * studied: no · context: user-provided · v1.1.0
 */

:root {
  /* ---- paper — warm sand tint (L 97.5 → bright / airy / postcard) ---- */
  --color-paper:       oklch(97.5% 0.012 88);
  --color-paper-2:     oklch(94.5% 0.016 88);
  --color-paper-3:     oklch(90%   0.024 88);

  /* ---- ink — sea-tinted, never pure black ---- */
  --color-ink:         oklch(22% 0.014 242);
  --color-ink-2:       oklch(40% 0.014 242);

  /* ---- rules & neutrals ---- */
  --color-rule:        oklch(82% 0.018 88);
  --color-rule-2:      oklch(88% 0.014 88);
  --color-muted:       oklch(46% 0.020 242);   /* de-emphasised TEXT · 6.56:1 on paper */
  --color-neutral:     oklch(56% 0.012 242);   /* decorative + large text only · 4.32:1 on paper */

  /* ---- accent — deep sea (one accent, ≤5% footprint) ---- */
  --color-accent:      oklch(46% 0.148 240);
  --color-accent-ink:  oklch(97.5% 0.012 88);
  --color-focus:       oklch(44% 0.200 240);

  /* ---- sea art ramp (decorative fills only, never text) ---- */
  --color-foam:        oklch(94% 0.026 226);
  --color-sea-bright:  oklch(72% 0.110 228);
  --color-sea:         oklch(60% 0.130 232);

  /* ---- sand art ramp ---- */
  --color-sand:        oklch(87% 0.048 86);
  --color-sand-deep:   oklch(76% 0.062 80);

  /* ---- warm signal — 必去 marker only ---- */
  --color-sunset:      oklch(70% 0.155 38);
  --color-sunset-deep: oklch(48% 0.160 36);
  --color-sunset-soft: oklch(93% 0.042 62);

  /* ---- type: 2 families + 1 outlier (ceiling) ---- */
  --font-display: "Bricolage Grotesque", "Noto Sans SC", ui-sans-serif, sans-serif;
  --font-body:    "Geist", "Noto Sans SC", ui-sans-serif, sans-serif;
  --font-outlier: "Space Mono", ui-monospace, monospace;   /* slot 1: hero date line · slot 2: footer colophon */

  /* ---- scale — major third (1.25) from 16px ---- */
  --text-sm:      0.875rem;                                  /* 14px — CJK floor */
  --text-base:    1rem;                                      /* 16px */
  --text-md:      1.25rem;                                   /* 20px */
  --text-lg:      1.5625rem;                                 /* 25px */
  --text-xl:      1.9531rem;                                 /* 31px */
  --text-2xl:     2.4414rem;                                 /* 39px */
  --text-display-s: clamp(2.125rem, 1.1rem + 3.2vw, 3.05rem);
  --text-display:   clamp(2.5rem, 0.9rem + 5.4vw, 5.25rem);

  /* ---- space — 4pt scale ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- motion ---- */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- radius — playful: 12px card ceiling ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* ---- depth — one whisper shadow, never stacked ---- */
  --shadow-whisper: 0 1px 2px oklch(22% 0.014 242 / 0.05);
  --shadow-lift:    0 8px 24px -12px oklch(46% 0.148 240 / 0.22);

  /* ---- z — six named levels ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---- layout ---- */
  --rail-w: 5rem;
  --measure: 65ch;
}