/* =====================================================================
 * tokens.css — Polyphase design tokens (single source of truth)
 *
 * Reference: site-spec v0.4 §14.1 Light/Dark dual tokens
 * All templates must import this file. Do NOT redefine these elsewhere.
 *
 * Two coexisting token families:
 *   1. SHELL tokens (--bg / --text / --signal / --rule / ...)
 *      Switch with OS theme via prefers-color-scheme. Used by masthead,
 *      footer, and any Mode-L body sections.
 *   2. FORCED-DARK tokens (--bg-D / --text-D / --signal-D / --rule-D / ...)
 *      Always dark regardless of OS theme. Used by sections that must
 *      render Mode D editorially (e.g. .hero) — independent of user theme.
 *
 * Step 0 sign-off M-4: editorial Mode (L|D) per scene is content-driven,
 * not OS-driven. OS theme only flips the shell.
 * ===================================================================== */

:root {
  /* ------------------------------------------------------------------
   * SHELL tokens — Light defaults (override under prefers-color-scheme: dark)
   * ------------------------------------------------------------------ */
  --bg: #FAFAFA;
  --bg-elev: #F1F1EF;
  --text: #07070A;
  --text-mute: rgba(7, 7, 10, 0.55);
  --text-soft: rgba(7, 7, 10, 0.35);
  --signal: #0F7B47;          /* journal accent (P), Light shell, WCAG AA on #FAFAFA */
  --signal-bright: #128A50;
  --neg: #B0573D;
  --rule: rgba(7, 7, 10, 0.10);
  --rule-strong: rgba(7, 7, 10, 0.16);
  --rule-soft: rgba(7, 7, 10, 0.06);

  /* Alpha-modulated derivatives used as backgrounds / decorative gradients.
     Kept here so base.css never hardcodes channel literals. */
  --signal-glow: rgba(15, 123, 71, 0.18);
  --portrait-grad-1: rgba(7, 7, 10, 0.06);
  --portrait-grad-2: rgba(7, 7, 10, 0.16);

  /* ------------------------------------------------------------------
   * FORCED-DARK tokens — always dark, used by editorial Mode D sections
   * ------------------------------------------------------------------ */
  --bg-D: #07070A;
  --bg-elev-D: #101015;
  --text-D: #FAFAFA;
  --text-mute-D: rgba(250, 250, 250, 0.55);
  --text-soft-D: rgba(250, 250, 250, 0.35);
  --signal-D: #1FB36A;        /* journal accent (P), Dark shell or forced-D scenes */
  --signal-bright-D: #2DC97B;
  --neg-D: #D17555;
  --rule-D: rgba(250, 250, 250, 0.10);
  --rule-strong-D: rgba(250, 250, 250, 0.16);
  --rule-soft-D: rgba(250, 250, 250, 0.06);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Type — self-host (M-8). Step 8 ships actual woff2; Step 2 falls
     back to system stack to avoid any Google Fonts CDN request. */
  --font-display: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont,
                  "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont,
                  "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;

  /* Legacy aliases — retained for any selectors copied from mocks that
     still reference them. New selectors should use the canonical tokens. */
  --bg-light: var(--bg);
  --bg-dark: var(--bg-D);
  --ink: var(--text);
  --ink-on-dark: var(--text-D);
  --hairline: var(--rule);
  --hairline-strong: var(--rule-strong);
  --hairline-on-dark: var(--rule-strong-D);
  --muted: var(--text-mute);
  --muted-on-dark: var(--text-mute-D);
}

/* =====================================================================
 * OS dark mode — flip SHELL tokens only.
 * FORCED-DARK tokens (-D) are intentionally untouched: Mode D sections
 * remain dark regardless of OS theme.
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07070A;
    --bg-elev: #101015;
    --text: #FAFAFA;
    --text-mute: rgba(250, 250, 250, 0.55);
    --text-soft: rgba(250, 250, 250, 0.35);
    --signal: #1FB36A;
    --signal-bright: #2DC97B;
    --neg: #D17555;
    --rule: rgba(250, 250, 250, 0.10);
    --rule-strong: rgba(250, 250, 250, 0.16);
    --rule-soft: rgba(250, 250, 250, 0.06);
    --signal-glow: rgba(31, 179, 106, 0.22);
    --portrait-grad-1: rgba(250, 250, 250, 0.06);
    --portrait-grad-2: rgba(250, 250, 250, 0.14);

    /* Refresh legacy aliases so they follow the shell. */
    --bg-light: var(--bg);
    --ink: var(--text);
    --hairline: var(--rule);
    --hairline-strong: var(--rule-strong);
    --muted: var(--text-mute);
  }
}

/* =====================================================================
 * Respect user motion preferences (site-spec v0.4 §14.7).
 * anim.js performs the same gate at the JS layer; this CSS belt-and-
 * braces handles any pure-CSS transitions.
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}