/* ============================================================
   BMines Visual v2 — Design Tokens
   Single source of truth for palette, gradient, surface, type.
   ------------------------------------------------------------
   Use these variables from components. Never hardcode brand
   colors or radii in component CSS.
   ============================================================ */

@import url("./assets/fonts/fonts.css");

:root {
  /* ---------- Brand palette ---------- */
  --base-blue: #0052ff;
  --base-blue-deep: #001a66;
  --base-blue-ink: #00103d;
  --lavender: #b8b0ff;
  --lavender-soft: #d6d2ff;

  /* ---------- Semantic background ---------- */
  --bg-gradient: radial-gradient(
    ellipse at 50% 100%,
    var(--lavender) 0%,
    var(--base-blue) 45%,
    var(--base-blue-deep) 100%
  );
  --bg-fallback: var(--base-blue-deep);

  /* ---------- Text ---------- */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.35);

  /* ---------- Surface (glass) ---------- */
  --surface-bg: rgba(255, 255, 255, 0.08);
  --surface-bg-strong: rgba(255, 255, 255, 0.12);
  --surface-border: rgba(255, 255, 255, 0.12);
  --surface-border-strong: rgba(255, 255, 255, 0.22);
  --surface-blur: 20px;
  --surface-shadow: 0 8px 32px rgba(0, 10, 60, 0.35);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* ---------- Tile ---------- */
  --tile-idle-bg: rgba(255, 255, 255, 0.06);
  --tile-idle-border: rgba(255, 255, 255, 0.12);
  --tile-idle-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --tile-safe: var(--base-blue);
  --tile-safe-glow: 0 0 24px rgba(0, 82, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --tile-bomb: #ff3b3b;
  --tile-bomb-glow: 0 0 28px rgba(255, 59, 59, 0.6);

  /* ---------- Accent / status ---------- */
  --accent: var(--base-blue);
  --accent-soft: rgba(0, 82, 255, 0.18);
  --success: #34d27a;
  --warning: #ffb547;
  --danger: #ff3b3b;
  --hot-edge: linear-gradient(120deg, #0052ff 0%, #7a55ff 55%, #ff66c4 100%);

  /* ---------- Radii ---------- */
  --r-tile: 16px;
  --r-card: 20px;
  --r-modal: 28px;
  --r-pill: 999px;

  /* ---------- Spacing scale ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* ---------- Z layers ---------- */
  --z-bg-grain: 0;
  --z-base: 1;
  --z-hud: 20;
  --z-toast: 80;
  --z-modal-backdrop: 100;
  --z-modal: 110;

  /* ---------- Easings ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.85, 0.25, 1);

  /* ---------- Durations ---------- */
  --d-micro: 150ms;
  --d-fast: 240ms;
  --d-normal: 360ms;
  --d-slow: 600ms;
  --d-narrative: 900ms;

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-text: "Inter", sans-serif;
  --font-mono: "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* Numeric strings (balances, multipliers, bets) get tabular-nums. */
  --num-feat: "tnum" 1, "lnum" 1;

  /* ---------- Grain overlay (SVG noise) ----------
     Used as background-image on a fixed full-screen layer with
     mix-blend-mode: overlay and low opacity. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ------------------------------------------------------------
   Back-compat aliases — keep old variable names alive so the
   existing component CSS still resolves while we migrate.
   These will be removed in the final polish commit.
   ------------------------------------------------------------ */
:root {
  --bg: var(--base-blue-deep);
  --panel: var(--surface-bg);
  --glass: var(--surface-bg);
  --accent-2: var(--lavender);
  --text: var(--text-primary);
  --muted: var(--text-muted);
}

/* ------------------------------------------------------------
   Global typography & numeric defaults
   ------------------------------------------------------------ */
html {
  color-scheme: dark;
}

body {
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.display,
.hero-multiplier {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.num,
.tabular,
[data-num] {
  font-feature-settings: var(--num-feat);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ------------------------------------------------------------
   prefers-reduced-motion baseline
   Component-level animations gate themselves on top of this.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 1ms;
    --d-fast: 1ms;
    --d-normal: 1ms;
    --d-slow: 1ms;
    --d-narrative: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}