/**
 * THREE CHANCES — design tokens.
 * Mobile-first, 390×844 base viewport. Dark table surface, single gold accent.
 *
 * Contrast ratios in comments are measured by src/design/contrast.ts and
 * enforced by tests/contrast.test.ts — they are not estimates.
 */

:root {
  /* ---------------------------------------------------------------- *
   * SURFACES
   * ---------------------------------------------------------------- */
  --tc-surface-table: #0d0f14;      /* Table Black — app background */
  --tc-surface: #161922;            /* panels, sheets */
  --tc-surface-2: #1d2230;          /* raised rows, inputs, modal bodies */
  --tc-card-edge: #2a2f3d;          /* hairline borders, card backs */

  /* ---------------------------------------------------------------- *
   * CARD STOCK — playing-card faces (dark text sits on these)
   * ---------------------------------------------------------------- */
  --tc-cream: #f5ebd6;              /* card face top of gradient */
  --tc-cream-dark: #e8dcc0;         /* card face bottom of gradient */
  --tc-card-face: linear-gradient(160deg, var(--tc-cream) 0%, var(--tc-cream-dark) 100%);
  --tc-ink: #0d0f14;                /* card numerals — 16.19:1 on cream, 14.08:1 on cream-dark */

  /* ---------------------------------------------------------------- *
   * ACCENT — one accent only
   * ---------------------------------------------------------------- */
  --tc-gold: #d4a574;               /* 8.61:1 on table — AA at any size */
  --tc-gold-light: #f0c891;         /* 12.21:1 — hover/active, focus ring */
  --tc-gold-glow: rgba(212, 165, 116, 0.15);
  --tc-gold-glow-strong: rgba(212, 165, 116, 0.32);

  /* ---------------------------------------------------------------- *
   * STATES
   * Colour is never the only signal — pair with --tc-win-glyph / --tc-loss-glyph.
   * ---------------------------------------------------------------- */
  --tc-win: #5fc28b;                /* 8.74:1 on table */
  --tc-win-glow: rgba(95, 194, 139, 0.18);
  --tc-win-glow-strong: rgba(95, 194, 139, 0.38);
  --tc-win-glyph: '✓';              /* non-colour cue, required on every win state */

  --tc-loss: #e07178;               /* 6.21:1 on table */
  --tc-loss-glow: rgba(224, 113, 120, 0.18);
  --tc-loss-glow-strong: rgba(224, 113, 120, 0.38);
  --tc-loss-glyph: '✗';             /* non-colour cue, required on every loss state */
  --tc-loss-vignette: radial-gradient(
    ellipse 120% 80% at 50% 50%,
    transparent 40%,
    rgba(224, 113, 120, 0.12) 72%,
    rgba(224, 113, 120, 0.28) 100%
  );

  /* ---------------------------------------------------------------- *
   * TEXT ON DARK
   * ---------------------------------------------------------------- */
  --tc-text-primary: #f5ebd6;       /* 16.19 / 14.83 / 13.40 across the 3 surfaces */

  /* AA-COMPLIANT MUTED — use this for all muted body copy.
     Replaces #6b6b78, which measures 3.65 / 3.34 / 3.02 and fails AA (4.5:1). */
  --tc-text-muted: #8a8a9a;         /* 5.64 / 5.17 / 4.67 — passes AA on all surfaces */

  /* DECORATIVE ONLY — fails AA for text. Permitted for non-text use such as
     hairlines, inactive dots and dividers, never for words a player must read. */
  --tc-hairline-muted: #6b6b78;

  --tc-text-disabled: rgba(245, 235, 214, 0.35);  /* ~2.87:1 — disabled controls are
                                                     exempt from AA (WCAG 1.4.3) */

  /* ---------------------------------------------------------------- *
   * TYPE
   * ---------------------------------------------------------------- */
  --tc-font-display: 'DM Serif Display', Georgia, serif;      /* card numerals only */
  --tc-font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
  --tc-font-mono: 'JetBrains Mono', ui-monospace, monospace;  /* timers, ELO, credits */

  --tc-size-card-xl: 56px;   /* hero card numeral */
  --tc-size-card-lg: 40px;   /* card in hand */
  --tc-size-card-sm: 24px;   /* pool card, played card */
  --tc-size-title: 24px;
  --tc-size-heading: 20px;
  --tc-size-body: 16px;
  --tc-size-label: 14px;
  --tc-size-micro: 12px;
  --tc-size-timer: 20px;     /* mono */

  --tc-weight-regular: 400;
  --tc-weight-medium: 500;
  --tc-weight-semibold: 600;

  --tc-leading-tight: 1.1;   /* numerals */
  --tc-leading-snug: 1.3;    /* headings */
  --tc-leading-body: 1.5;    /* body copy */

  --tc-tracking-wide: 0.08em;   /* the THREE CHANCES wordmark, overline labels */
  --tc-tracking-normal: 0;

  /* ---------------------------------------------------------------- *
   * SPACING — 4px base
   * ---------------------------------------------------------------- */
  --tc-space-1: 4px;
  --tc-space-2: 8px;
  --tc-space-3: 12px;
  --tc-space-4: 16px;
  --tc-space-5: 20px;
  --tc-space-6: 24px;
  --tc-space-8: 32px;
  --tc-space-10: 40px;
  --tc-space-12: 48px;
  --tc-space-16: 64px;

  /* ---------------------------------------------------------------- *
   * RADII
   * ---------------------------------------------------------------- */
  --tc-radius-card: 12px;
  --tc-radius-button: 10px;
  --tc-radius-button-sm: 8px;
  --tc-radius-pill: 999px;
  --tc-radius-panel: 16px;
  --tc-radius-panel-lg: 20px;

  /* ---------------------------------------------------------------- *
   * ELEVATION
   * ---------------------------------------------------------------- */
  --tc-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
  --tc-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.55);
  --tc-shadow-gold: 0 0 24px var(--tc-gold-glow);
  --tc-focus-ring: 0 0 0 2px var(--tc-surface-table), 0 0 0 4px var(--tc-gold-light);

  /* ---------------------------------------------------------------- *
   * LAYOUT — 390×844 base
   * ---------------------------------------------------------------- */
  --tc-viewport-min: 320px;
  --tc-viewport-base: 390px;
  --tc-gutter: var(--tc-space-4);
  --tc-touch-min: 44px;      /* minimum tap target */

  /* ---------------------------------------------------------------- *
   * MOTION
   * ---------------------------------------------------------------- */
  --tc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tc-ease-enter: cubic-bezier(0, 0, 0, 1);
  /* NEW (per design/motion.md): exits accelerate away; pop overshoots for badges. */
  --tc-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --tc-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tc-duration-instant: 80ms;   /* NEW — press feedback */
  --tc-duration-fast: 120ms;
  --tc-duration-base: 240ms;
  --tc-duration-reveal: 400ms;
  --tc-duration-scene: 600ms;    /* NEW — screen changes, deal-in */
  --tc-duration-celebrate: 900ms;/* NEW — match-end badge, particles */
  --tc-stagger: 60ms;            /* the one rhythmic constant for sibling sequences */

  /* ---------------------------------------------------------------- *
   * BREAKPOINTS — single source of truth for the three tiers.
   *   mobile  ≤ 767            (base styles, unchanged)
   *   tablet  768 – 1279       (min-width: --tc-bp-tablet)
   *   desktop ≥ 1280           (min-width: --tc-bp-desktop)
   * NOTE: CSS cannot use var() inside an @media condition, so the client's
   * media queries mirror these literals; changing a value means updating both.
   * ---------------------------------------------------------------- */
  --tc-bp-tablet: 768px;
  --tc-bp-desktop: 1280px;

  /* ---------------------------------------------------------------- *
   * AVAILABILITY / SELECTION STATUS  (distinct from WIN/LOSS outcome)
   *
   * Green/red now carry two meanings. They are disambiguated by TREATMENT, not
   * hue alone: STATUS uses these DESATURATED tints as a thin, static ring plus a
   * glyph (no glow, no motion). OUTCOME (--tc-win/--tc-loss) stays the vivid,
   * glowing, animated ring + badge. Glyphs differ too — status uses ✓ (yours) and
   * 🔒 "locked/taken" (opponent), never the outcome ✗ — so a taken slot never
   * reads as a loss. See design/motion.md § "Availability vs outcome".
   * ---------------------------------------------------------------- */
  --tc-mine: #6fae8f;              /* your taken card — calmer than win #5fc28b */
  --tc-mine-glyph: '✓';
  --tc-foe: #c58790;               /* opponent's taken card — calmer than loss #e07178 */
  --tc-foe-glyph: '🔒';            /* "unavailable", not a loss ✗ */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tc-duration-instant: 1ms;
    --tc-duration-fast: 1ms;
    --tc-duration-base: 1ms;
    --tc-duration-reveal: 1ms;
    --tc-duration-scene: 1ms;
    --tc-duration-celebrate: 1ms;
    --tc-stagger: 0ms;
  }
}