/* ──────────────────────────────────────────────
 * Trustcast Design Tokens — Source of Truth
 *
 * Canonical palette is mirrored in:
 *   site/src/content/brand.json — color_system[]
 *
 * If you change a token here, update brand.json.
 * If you change brand.json, run a search for the
 * old value and update all SVGs in public/.
 *
 * Order: tokens.css → motion.css → gradients.css → atoms.css → component CSS
 *
 * iter-10 changes:
 *   - Paper-B promotion (#faf6ed is now default --paper)
 *   - Mist (#eef1f4) added — cool side of 7-tone duality, GLOBAL hairline
 *   - Motion tokens (durations, easings, stagger)
 *   - Gradient seed tokens (6 boundary recipes for section seams)
 * ────────────────────────────────────────────── */

:root {
  /* ────────── Color: 7-tone duality (温:冷 = 1.3:1 locked) ──────────
   * Warm side (5 tones): paper, paper-warm, paper-deep, paper-plate, ink, ink-deep, shu, gold
   * Cool side (2 tones): mist, slate
   * Mist replaces the legacy warm-beige hairline (#bdb3a4) globally. */

  /* Paper system — iter-10: Paper-B is now default. */
  --paper:        #faf6ed;   /* iter-10: was #f5f0e6, promoted from --paper-warm */
  --paper-warm:   #faf6ed;   /* alias — equals --paper, retained for legacy refs */
  --paper-deep:   #f5f0e6;   /* iter-10: was #ece4d2, now holds the prior --paper value */
  --paper-plate:  #ece4d2;   /* prior --paper-deep, kept addressable for printed plates */

  --ink:          #0a1628;
  --ink-deep:     #050b15;   /* derived: ink × 0.6 luminance, for inverse plates only */
  --slate:        #5a6478;   /* cool side: secondary text */
  --slate-soft:   rgba(10, 22, 40, 0.55);
  --shu:          #c73e1d;   /* single accent, decision cues, stops */
  --gold:         #d4a24c;   /* supporting markers, metadata */

  /* Cool side of the duality — iter-10 */
  --mist:           #eef1f4;
  --mist-rule:      #d8dee5;   /* derived: mist × 0.92 luminance, for dividers on paper */
  --bg-digital:     var(--mist);

  --rule-faint:     rgba(10, 22, 40, 0.10);
  --rule-medium:    rgba(10, 22, 40, 0.18);
  --rule-strong:    rgba(10, 22, 40, 0.32);
  --rule-ink:       #0a1628;
  --rule-hairline:  var(--mist-rule);   /* iter-10: GLOBAL section divider */

  /* Surfaces (composed from canonical tones) */
  --surface:        rgba(250, 246, 237, 0.92);
  --surface-strong: #faf6ed;
  --surface-inverse: #0a1628;
  --surface-inverse-soft: rgba(245, 240, 230, 0.06);

  /* Selection / focus */
  --focus-ring: rgba(199, 62, 29, 0.32);

  /* ────────── Typography ────────── */
  --font-display-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --font-sans-jp:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --font-display:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans:       "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:       "IBM Plex Mono", "SFMono-Regular", "Menlo", monospace;

  /* Type scale (clamp pairs) */
  --type-display:    clamp(40px, 6vw, 82px);     /* Hero JP display */
  --type-h1:         clamp(30px, 4vw, 52px);     /* Section title JP */
  --type-h2:         clamp(24px, 2.6vw, 36px);   /* Subsection JP */
  --type-h3:         clamp(18px, 1.9vw, 24px);
  --type-lede:       clamp(16px, 1.35vw, 19px);
  --type-body:       clamp(15px, 1.1vw, 17px);
  --type-meta:       12px;                       /* mono meta / caption */
  --type-eyebrow:    11px;                       /* mono eyebrow */
  --type-numeric:    clamp(28px, 3.4vw, 48px);   /* numeric emphasis (KPI, metrics) */

  /* Line heights */
  --lh-display: 1.16;
  --lh-headline: 1.26;
  --lh-prose: 1.82;
  --lh-meta: 1.55;

  /* Letter spacing */
  --ls-display: -0.025em;
  --ls-headline: -0.015em;
  --ls-eyebrow: 0.16em;
  --ls-mono-meta: 0.18em;

  /* ────────── Space ────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Block padding scale (for section.block) */
  --block-pad-y: clamp(64px, 10vw, 128px);
  --block-pad-tight-y: clamp(48px, 8vw, 96px);

  /* ────────── Layout ────────── */
  --radius-sharp: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --max-content: 1280px;
  --max-narrow: 880px;
  --max-prose: 70ch;
  --max-prose-narrow: 60ch;

  /* ────────── Motion (iter-10) ──────────
   * Durations are quantized — never invent ad-hoc values.
   * Easings: trust-curve (out-quart) + decision-curve (in-out-cubic).
   * No bouncy / overshoot easings. No springs. */
  --dur-instant:    80ms;     /* hover state primer */
  --dur-fast:       180ms;    /* link / button hover, focus ring */
  --dur-base:       320ms;    /* most micro-interactions, fade, color */
  --dur-medium:     520ms;    /* scroll reveals, panel slide */
  --dur-slow:       820ms;    /* hero entrance, only once per page load */
  --dur-glacial:    1400ms;   /* gradient transition between sections */

  --ease-trust:     cubic-bezier(0.2, 0.6, 0.2, 1);   /* out-quart-ish; the existing reveal-up curve */
  --ease-decision:  cubic-bezier(0.4, 0, 0.2, 1);     /* in-out-cubic; for state changes */
  --ease-linear:    linear;                            /* counters, progress, marquee only */

  --stagger-step:   80ms;

  /* ────────── Gradients (iter-10) ──────────
   * Trustcast gradients are CONTEXTUAL — they smooth the boundary between
   * two adjacent surfaces. NEVER decorative fills. Recipes auto-resolve. */
  --grad-dir-down:    180deg;
  --grad-dir-up:        0deg;
  --grad-dir-diag:    175deg;

  --grad-paper-to-mist:
    linear-gradient(var(--grad-dir-down), var(--paper) 0%, var(--paper) 40%, var(--mist) 100%);
  --grad-mist-to-paper:
    linear-gradient(var(--grad-dir-down), var(--mist) 0%, var(--paper) 60%, var(--paper) 100%);
  --grad-paper-to-ink:
    linear-gradient(var(--grad-dir-down), var(--paper) 0%, var(--paper) 30%, var(--ink) 100%);
  --grad-ink-to-paper:
    linear-gradient(var(--grad-dir-down), var(--ink) 0%, var(--ink) 30%, var(--paper) 100%);
  --grad-paper-to-plate:
    linear-gradient(var(--grad-dir-down), var(--paper) 0%, var(--paper-deep) 50%, var(--paper-plate) 100%);
  --grad-paper-to-paper-deep:
    linear-gradient(var(--grad-dir-down), var(--paper) 0%, var(--paper-deep) 100%);
  --grad-paper-deep-to-mist:
    linear-gradient(var(--grad-dir-down), var(--paper-deep) 0%, var(--paper-deep) 40%, var(--mist) 100%);
  --grad-paper-deep-to-ink:
    linear-gradient(var(--grad-dir-down), var(--paper-deep) 0%, var(--paper-deep) 30%, var(--ink) 100%);
  --grad-mist-to-paper-deep:
    linear-gradient(var(--grad-dir-down), var(--mist) 0%, var(--paper-deep) 60%, var(--paper-deep) 100%);
  --grad-paper-deep-to-paper:
    linear-gradient(var(--grad-dir-down), var(--paper-deep) 0%, var(--paper) 60%, var(--paper) 100%);

  /* ────────── Legacy aliases — back-compat for existing component CSS ──────────
   * These map old variable names to canonical tokens. Do NOT add new uses of
   * these — write new components against the canonical tokens above. */
  --paper-rose:       var(--paper-deep);
  --ink-primary:      var(--ink);
  --ink-secondary:    var(--slate);
  --ink-faint:        var(--rule-hairline);   /* iter-10: warm-beige hairline retired in favour of Mist */
  --accent-shu:       var(--shu);
  --accent-gold:      var(--gold);
  --accent-clay:      #c77d61;
  --rule:             var(--ink);

  --font-display-ja:  var(--font-display-jp);
}