/* Shoken Design System — Core tokens
 * Direction: C1 (Linear/Vercel × Modern Meiji)
 * Warm ink on bone. Source Serif 4 display + Inter Tight UI + JetBrains Mono data.
 */

:root {
  /* ── Neutrals (warm ink on bone) ─────────────────────── */
  --ink: #0B0A08;           /* primary text, darkest surface */
  --graphite: #1C1A17;
  --slate: #2D2A26;
  --char: #3A3632;          /* body text */
  --ash: #55504A;           /* secondary body */
  --stone: #8A857D;         /* metadata, captions */
  --mist: #B3ADA3;          /* disabled, faint */
  --fog: #D4CEC2;           /* emphasis rule */
  --rule: #E6DFD0;          /* default hairline */
  --shoji: #EEE9DD;         /* subtle fill */
  --kinari: #F8F4EA;        /* elevated surface */
  --paper: #FDFAF2;         /* base surface */
  --bone: #FBF8F0;

  /* ── Accents (sovereign reds + supporting) ───────────── */
  --shu: #C2382F;           /* primary accent — Shōken Vermilion */
  --shu-bright: #D94438;    /* hover / live indicators */
  --shu-dim: #8F261F;       /* pressed */
  --shu-ink: #5A1612;       /* darkest red */

  --gold: #9A7B3A;          /* validated / approved */
  --moss: #3E5E3E;          /* success */
  --mizu: #3E5968;          /* info */
  --clay: #8C4A2A;          /* warning */

  /* ── Typography ───────────────────────────────────────── */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── Spacing (4pt grid) ──────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;

  /* ── Radii ───────────────────────────────────────────── */
  --r-sm: 2px;   --r-md: 4px;   --r-lg: 6px;   --r-xl: 10px;   --r-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-raise: 0 1px 2px rgba(11,10,8,.04), 0 2px 8px rgba(11,10,8,.04);
  --shadow-float: 0 2px 4px rgba(11,10,8,.05), 0 8px 24px rgba(11,10,8,.06);
  --shadow-hero: 0 20px 60px rgba(11,10,8,.08), 0 4px 12px rgba(11,10,8,.04);
  --shadow-seal: 0 0 0 1px rgba(194,56,47,.15), 0 1px 2px rgba(194,56,47,.08);

  /* ── Motion ──────────────────────────────────────────── */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-micro: 120ms;
  --dur-base: 200ms;
  --dur-emph: 320ms;
}

/* ── Semantic resets and defaults ─────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}

/* Typography classes */
.h1, .display-xl {
  font-family: var(--font-display);
  font-size: 76px; line-height: 1.0; font-weight: 400;
  letter-spacing: -0.03em;
}
.h2, .display-lg {
  font-family: var(--font-display);
  font-size: 54px; line-height: 1.05; font-weight: 400;
  letter-spacing: -0.025em;
}
.h3, .display-md {
  font-family: var(--font-display);
  font-size: 40px; line-height: 1.1; font-weight: 400;
  letter-spacing: -0.02em;
}
.h4 {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1.2; font-weight: 400;
  letter-spacing: -0.015em;
}
.h5 {
  font-family: var(--font-sans);
  font-size: 20px; line-height: 1.3; font-weight: 500;
  letter-spacing: -0.02em;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px; line-height: 1.55; font-weight: 400;
  color: var(--ash);
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 19px; line-height: 1.5; font-weight: 400;
  color: var(--ash);
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.5; color: var(--stone);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--shu);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px;
  background: currentColor;
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.num { font-variant-numeric: tabular-nums lining-nums; }