/**
 * ═══════════════════════════════════════════════════════════════
 * NEXUS CASINO — Design Token System
 * ═══════════════════════════════════════════════════════════════
 *
 * SCOPE: Single source of truth for all design tokens, CSS reset,
 *        body base styles, atmospheric background, scrollbar,
 *        selection, and global touch behavior.
 *
 * RESPONSIBILITIES:
 *   - :root variable block (colors, typography, spacing, radius,
 *     elevation, motion, layout)
 *   - CSS reset (box-sizing, margin, padding, font-smoothing)
 *   - Body base styles (background, color, font, overflow, overscroll)
 *   - Atmospheric radial gradient background
 *   - Themed scrollbar (thin, dark)
 *   - ::selection styling
 *   - Tap-highlight and touch-callout suppression
 *
 * LOAD ORDER: 1st — loaded on ALL pages before shell.css or
 *             game-shared.css.
 *
 * CONSTRAINTS:
 *   - No !important
 *   - No aspect-ratio
 *   - Every var() usage includes a fallback value
 *   - Telegram WebView compatible (375px–480px mobile)
 *
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ DEPTH PALETTE — OLED Blacks ═══ */
  --bg: #050510;
  --bg-elevated: #0a0a1e;
  --surface: rgba(15, 15, 38, 0.5);
  --surface-hover: rgba(22, 22, 52, 0.7);
  --card: rgba(13, 13, 33, 0.45);
  --card-solid: #090918;

  /* ═══ BORDERS ═══ */
  --border: rgba(124, 58, 237, 0.12);
  --border-hover: rgba(124, 58, 237, 0.25);
  --border-active: rgba(0, 229, 255, 0.4);
  --border-glow: rgba(0, 229, 255, 0.15);

  /* ═══ PRIMARY SPECTRUM — Violet ═══ */
  --primary: #7c3aed;
  --primary-hover: #a855f7;
  --primary-dim: rgba(124, 58, 237, 0.12);
  --primary-glow: rgba(124, 58, 237, 0.35);

  /* ═══ ACCENT — Electric Cyan ═══ */
  --accent: #00e5ff;
  --accent-hover: #3df3ff;
  --accent-dim: rgba(0, 229, 255, 0.08);
  --accent-glow: rgba(0, 229, 255, 0.25);

  /* ═══ SEMANTIC COLORS ═══ */
  --success: #00e676;
  --success-dim: rgba(0, 230, 118, 0.10);
  --success-glow: rgba(0, 230, 118, 0.35);
  --danger: #ff2d55;
  --danger-dim: rgba(255, 45, 85, 0.10);
  --danger-glow: rgba(255, 45, 85, 0.35);
  --warning: #ffb300;
  --warning-dim: rgba(255, 179, 0, 0.08);
  --warning-glow: rgba(255, 179, 0, 0.30);
  --gold: #ffca28;
  --gold-dim: rgba(255, 202, 40, 0.08);
  --gold-glow: rgba(255, 202, 40, 0.30);

  /* ═══ TEXT HIERARCHY ═══ */
  --text: #f0f0f8;
  --text-secondary: #9a9abe;
  --text-muted: #7a7a9e;
  /* WCAG AA — 4.93:1 vs --bg */
  --text-ghost: #3a3a5a;

  /* ═══ TYPOGRAPHY ═══ */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-display: 42px;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ═══ SPACING (4px rhythm) ═══ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ═══ RADIUS ═══ */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ═══ ELEVATION ═══ */
  --shadow-flat: none;
  --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.8);
  --shadow-glow-primary: 0 0 20px var(--primary-glow, rgba(124, 58, 237, 0.35));
  --shadow-glow-accent: 0 0 20px var(--accent-glow, rgba(0, 229, 255, 0.25));

  /* ═══ MOTION ═══ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ═══ LAYOUT ═══ */
  --max-width: 480px;
  --nav-height: 64px;
  --header-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --page-pad: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   CSS RESET
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   BODY BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg, #050510);
  color: var(--text, #f0f0f8);
  font-family: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--fs-base, 14px);
  font-weight: var(--fw-normal, 400);
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior: none;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC BACKGROUND GRADIENT
   ═══════════════════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%,
      rgba(124, 58, 237, 0.06) 0%,
      rgba(124, 58, 237, 0.02) 40%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR STYLES (THIN, THEMED)
   ═══════════════════════════════════════════════════════════════ */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-ghost, #3a3a5a) transparent;
}

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--text-ghost, #3a3a5a);
  border-radius: var(--radius-full, 9999px);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #7a7a9e);
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION STYLING
   ═══════════════════════════════════════════════════════════════ */

::selection {
  background: var(--primary-dim, rgba(124, 58, 237, 0.12));
  color: var(--text, #f0f0f8);
}

::-moz-selection {
  background: var(--primary-dim, rgba(124, 58, 237, 0.12));
  color: var(--text, #f0f0f8);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TOUCH BEHAVIOR
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-SMALL VIEWPORT (< 360px)
   Reduces token values one step for devices narrower than
   iPhone SE (375px), e.g., Galaxy Fold front screen (280px).
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
  :root {
    --page-pad: 12px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 18px;
  }
}