/* ============================================================
   HOODWIN — shared design tokens

   Every game imports this first. Change values here, not in
   per-game stylesheets.

   Palette: neutral graphite greys carry the interface; a single
   vivid green carries every action, value and win state.
   ============================================================ */

:root {
  /* --- Surfaces (graphite grey ramp, not pure black) --- */
  --bg-void: #0d0e10;
  --bg-base: #121316;
  --bg-raised: #191a1e;
  --bg-panel: #1d1f23;
  --bg-elevated: #24262c;
  --bg-inset: #0f1013;
  --bg-hover: #2a2d34;

  /* --- Accent: HoodWin green --- */
  --accent-100: #d8ffe6;
  --accent-200: #93f7b8;
  --accent-300: #4ce88d;
  --accent-400: #00d95f;   /* primary */
  --accent-500: #00b850;
  --accent-600: #018f3e;
  --accent-700: #04602b;
  --accent-800: #063d1d;

  --accent-gradient: linear-gradient(145deg, #93f7b8 0%, #00d95f 38%, #00b850 72%, #4ce88d 100%);
  --accent-gradient-soft: linear-gradient(160deg, #00d95f 0%, #018f3e 100%);
  --text-on-accent: #04210e;

  /* Legacy aliases — earlier tables were built against a gold ramp.
     Kept pointing at the accent so older rules keep working; prefer
     the --accent-* names in anything new. */
  --gold-100: var(--accent-100);
  --gold-200: var(--accent-200);
  --gold-300: var(--accent-300);
  --gold-400: var(--accent-400);
  --gold-500: var(--accent-500);
  --gold-600: var(--accent-600);
  --gold-700: var(--accent-700);
  --brass: var(--accent-600);
  --gold-gradient: var(--accent-gradient);
  --gold-gradient-soft: var(--accent-gradient-soft);
  --text-on-gold: var(--text-on-accent);

  /* --- Table felts: desaturated so the accent green stays the
         brightest green on screen --- */
  --felt-900: #0b0f0d;
  --felt-800: #101614;
  --felt-700: #16201c;
  --felt-600: #1c2a24;
  --felt-500: #24372e;
  --felt-glow: rgba(0, 217, 95, 0.18);

  /* --- Table / chip semantics --- */
  --red: #d43d4e;
  --red-deep: #96202d;
  --red-lit: #f0576a;
  --black-pocket: #1d1f23;
  --black-pocket-lit: #2f323a;

  /* --- Currency marks --- */
  --eth-tint: #8ea2f0;
  --usdt-tint: #26a17b;
  --usdc-tint: #2775ca;

  /* --- Text --- */
  --text-hi: #f2f4f5;
  --text-mid: #a8adb5;
  --text-low: #74797f;
  --text-faint: #4c5057;

  /* --- Status --- */
  --win: #00d95f;
  --win-glow: rgba(0, 217, 95, 0.45);
  --loss: #ef4a5c;
  --loss-glow: rgba(239, 74, 92, 0.35);

  /* --- Lines --- */
  --line-hair: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(0, 217, 95, 0.42);

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5);
  --glow-gold: 0 0 24px rgba(0, 217, 95, 0.26);
  --glow-gold-strong: 0 0 42px rgba(0, 217, 95, 0.46);
  --glow-accent: var(--glow-gold);
  --glow-accent-strong: var(--glow-gold-strong);

  /* --- Geometry --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 480ms;

  /* --- Type --- */
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "DM Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;

  /* --- Chip colours (roulette only) --- */
  --chip-1: #eef0f2;
  --chip-1-dark: #b4b8bd;
  --chip-5: #d43d4e;
  --chip-5-dark: #8b1c28;
  --chip-25: #00b850;
  --chip-25-dark: #04602b;
  --chip-100: #24262c;
  --chip-100-dark: #0d0e10;
  --chip-500: #7b56d6;
  --chip-500-dark: #422b7f;
  --chip-1000: #00d95f;
  --chip-1000-dark: #018f3e;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}

/* ============================================================
   SETTINGS-DRIVEN THEMING

   settings.js stamps data-* attributes on <html>; everything below
   reacts to them. Nothing needs to know a setting exists.
   ============================================================ */

/* ---------- Accent swaps ----------
   Only the accent ramp moves. Surfaces, text and status colours are
   deliberately untouched so contrast stays where it was tested. */

:root[data-accent="violet"] {
  --accent-100: #ece4ff; --accent-200: #cbb6ff; --accent-300: #a97bff;
  --accent-400: #8b5cf6; --accent-500: #7439e8; --accent-600: #5b21b6;
  --accent-700: #3d1580; --accent-800: #260c52;
  --text-on-accent: #ffffff;
  --win: #a97bff; --win-glow: rgba(169, 123, 255, 0.45);
  --line-strong: rgba(139, 92, 246, 0.42);
  --glow-gold: 0 0 24px rgba(139, 92, 246, 0.3);
  --glow-gold-strong: 0 0 42px rgba(139, 92, 246, 0.5);
  --felt-glow: rgba(139, 92, 246, 0.18);
}

:root[data-accent="cyan"] {
  --accent-100: #dcfbff; --accent-200: #a5f0fb; --accent-300: #5fdcf0;
  --accent-400: #22c8e6; --accent-500: #0fa5c2; --accent-600: #0b7d94;
  --accent-700: #075566; --accent-800: #043744;
  --text-on-accent: #032630;
  --win: #22c8e6; --win-glow: rgba(34, 200, 230, 0.45);
  --line-strong: rgba(34, 200, 230, 0.42);
  --glow-gold: 0 0 24px rgba(34, 200, 230, 0.28);
  --glow-gold-strong: 0 0 42px rgba(34, 200, 230, 0.48);
  --felt-glow: rgba(34, 200, 230, 0.18);
}

:root[data-accent="amber"] {
  --accent-100: #fff4d6; --accent-200: #ffe1a0; --accent-300: #ffc95c;
  --accent-400: #f5b026; --accent-500: #d99213; --accent-600: #a86e0c;
  --accent-700: #714908; --accent-800: #4a3006;
  --text-on-accent: #2a1c02;
  --win: #f5b026; --win-glow: rgba(245, 176, 38, 0.45);
  --line-strong: rgba(245, 176, 38, 0.42);
  --glow-gold: 0 0 24px rgba(245, 176, 38, 0.28);
  --glow-gold-strong: 0 0 42px rgba(245, 176, 38, 0.48);
  --felt-glow: rgba(245, 176, 38, 0.18);
}

:root[data-accent="rose"] {
  --accent-100: #ffe4ec; --accent-200: #ffb3ca; --accent-300: #ff77a2;
  --accent-400: #f43f76; --accent-500: #d41f59; --accent-600: #a11244;
  --accent-700: #6d0c2e; --accent-800: #47081e;
  --text-on-accent: #ffffff;
  --win: #ff77a2; --win-glow: rgba(244, 63, 118, 0.45);
  --line-strong: rgba(244, 63, 118, 0.42);
  --glow-gold: 0 0 24px rgba(244, 63, 118, 0.28);
  --glow-gold-strong: 0 0 42px rgba(244, 63, 118, 0.48);
  --felt-glow: rgba(244, 63, 118, 0.18);
}

/* Recompute the derived tokens once, after any accent override. */
:root[data-accent] {
  --accent-gradient: linear-gradient(145deg, var(--accent-200) 0%, var(--accent-400) 38%, var(--accent-500) 72%, var(--accent-300) 100%);
  --accent-gradient-soft: linear-gradient(160deg, var(--accent-400) 0%, var(--accent-600) 100%);
  --gold-gradient: var(--accent-gradient);
  --gold-gradient-soft: var(--accent-gradient-soft);
  --text-on-gold: var(--text-on-accent);
  --glow-accent: var(--glow-gold);
  --glow-accent-strong: var(--glow-gold-strong);
}

/* ---------- Density ----------
   A single scale multiplier the layout reads, rather than a full
   second set of spacing values to keep in sync. */

:root { --density: 1; --gap: calc(0.75rem * var(--density)); --pad: calc(1rem * var(--density)); }
:root[data-density="compact"] { --density: 0.78; }
:root[data-density="cozy"]    { --density: 1; }
:root[data-density="roomy"]   { --density: 1.28; }

/* ---------- Motion ---------- */

:root[data-motion="reduced"] { --t-slow: 160ms; --t-med: 110ms; --t-fast: 70ms; }
:root[data-motion="off"] { --t-slow: 0ms; --t-med: 0ms; --t-fast: 0ms; }
:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* ---------- Privacy: hide balance ----------
   Blurs the figure rather than removing it, so layout never jumps
   and the player can still reveal it by hovering. */

:root.has-hide-balance .balance-sensitive {
  filter: blur(9px);
  transition: filter var(--t-med) var(--ease-out);
  cursor: pointer;
}
:root.has-hide-balance .balance-sensitive:hover { filter: none; }