/* soullinked.io design tokens — the single source of truth.
 * Every color, size, and duration the site uses is named here; component CSS
 * (app.css) and page CSS consume ONLY these variables. Brand hexes appear in
 * this file and nowhere else. Canon for the brand values is the mark itself:
 * web/static/soullinked-*-brokenlink-*.svg (teal = the intact link, coral =
 * the one that broke).
 *
 * Conventions:
 *  - Mobile-first. Base design width 360px; the only breakpoints are
 *    min-width: 768px and min-width: 1280px.
 *  - Color is never the only channel (spec 19.2): every status color pairs
 *    with an icon or label at the component layer.
 *  - Player colors are player-chosen cosmetics, not semantics — they stay
 *    stable across the teal/coral rebrand so existing runs keep their look.
 */

:root {
  /* ---- brand (from the mark) --------------------------------------------- */
  --brand-teal: #3ddac0;   /* the intact link — connection, alive, ok */
  --brand-coral: #ff5d63;  /* the link that broke — death, blame, danger */
  --brand-navy: #0f1222;   /* the field the chain lives on */
  --brand-ink: #edeff7;    /* wordmark ink */
  --brand-indigo: #4f52b2; /* the ".io" — decorative fills ONLY (fails AA as text) */

  /* ---- surfaces (navy-tinted ramp) --------------------------------------- */
  --surface-sunken: #0a0c14; /* inputs, code wells, ledger backgrounds */
  --surface-0: var(--brand-navy); /* page background */
  --surface-1: #171a2b;      /* cards */
  --surface-2: #1e2236;      /* raised: hovers, chips, table headers */
  --line: #2a2f45;
  --line-strong: #3a4060;

  /* ---- text --------------------------------------------------------------- */
  --text: var(--brand-ink);
  --text-dim: #8f96ac; /* AA on surface-1 */

  /* ---- semantics ----------------------------------------------------------
   * ok/danger ARE the brand: intact link teal, broken link coral. */
  --ok: var(--brand-teal);
  --danger: var(--brand-coral);
  --warn: #ffc857;
  --info: #66a3ff;            /* lightened from v1's #5599ff for AA on cards */
  --accent: var(--brand-teal);
  --accent-2: #8a8dff;        /* indigo lifted into AA range for text/links */

  /* tinted fills for badges, banners, pills (dark, sit on surface-1) */
  --tint-ok: #0e2f2a;
  --tint-danger: #331419;
  --tint-warn: #332a10;
  --tint-info: #13233f;
  --tint-indigo: #1d1f3a;

  /* ---- player identity palette (cosmetic, colorblind-conscious, FROZEN) ---
   * Chosen by players in settings; rendered on dots/ghosts/graph nodes and
   * ALWAYS paired with the player's name text. Do not rebrand these. */
  --player-1: #3be070;
  --player-2: #5599ff;
  --player-3: #ff5964;
  --player-4: #ffc857;
  --player-5: #c58fff;
  --player-6: #4dd6c1;
  --player-7: #ff9d5c;
  --player-8: #f26fd8;

  /* ---- type ---------------------------------------------------------------
   * System stacks only: zero font files = zero layout shift by construction.
   * --font-mono is the brand mono (the wordmark's own stack) — used for the
   * logotype, lobby codes, tokens, playerIds, and stat figures. */
  --font-ui: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --lh: 1.45;
  /* weights by convention: 400 body, 700 emphasis/labels, 800 display/brand */

  /* ---- space (4px base) --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- shape & depth ------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);

  /* ---- motion ------------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- layers ------------------------------------------------------------- */
  --z-nav: 10;
  --z-toast: 50;
  --z-live: 100;
  --z-dialog: 200;

  /* ---- focus -------------------------------------------------------------- */
  --focus-ring: 2px solid var(--accent);
}

/* Reduced motion is a token-level guarantee, not a per-component courtesy. */
@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;
  }
}