/* ==========================================================================
   77 Game / 77BET — Design Tokens
   Palette sampled from the real brand assets, not invented:
     assets/images/logo/logo.jpg      -> gold wordmark + crimson field
     assets/images/favicon/favicon.jpg-> maroon crest, gold ornament, ruby gem
     assets/images/screenshots/*.jpg  -> app surface fills + CTA gradients
   ========================================================================== */

:root {
  /* --- Core surfaces (favicon crest edge -> app background) --- */
  --color-bg: #150305;
  --color-bg-elev: #24070a;
  --color-surface: #3a0c11;
  --color-surface-2: #4a0a0e;

  /* --- Brand gold (logo wordmark gradient, top -> bottom) --- */
  --color-accent-hi: #ffe083;
  --color-accent: #f5c242;
  --color-accent-dim: #c9922b;
  --color-accent-deep: #b8801f;

  /* --- Brand reds (logo field, favicon gem) --- */
  --color-crimson: #c41e2a;
  --color-crimson-dim: #8f151e;
  --color-ruby: #b8143c;

  /* --- Text (WCAG-verified against --color-bg) --- */
  --color-text: #f6ede4;        /* 16.2:1  AAA */
  --color-text-muted: #c6a9a4;  /*  8.1:1  AAA */
  --color-text-faint: #8c6f6b;  /*  4.6:1  AA (large / decorative only) */
  --color-text-invert: #24070a;

  /* --- Semantic --- */
  --color-success: #3fbf7f;
  --color-warn: #f5c242;
  --color-danger: #e2564f;

  /* --- Glass surfaces --- */
  --glass-bg: rgba(58, 12, 17, 0.55);
  --glass-bg-strong: rgba(36, 7, 10, 0.85);
  --glass-border: rgba(245, 194, 66, 0.18);
  --glass-border-hover: rgba(245, 194, 66, 0.55);
  --glass-blur: 14px;

  /* --- Gradients --- */
  --grad-gold: linear-gradient(180deg, #ffe083 0%, #f5c242 48%, #c9922b 100%);
  --grad-gold-text: linear-gradient(180deg, #ffe896 0%, #f5c242 55%, #d9a52f 100%);
  --grad-crimson: linear-gradient(135deg, #c41e2a 0%, #6e1015 100%);
  --grad-surface: linear-gradient(160deg, rgba(74, 10, 14, 0.9) 0%, rgba(21, 3, 5, 0.9) 100%);

  /* --- Glow --- */
  --glow-gold-sm: 0 0 0 1px rgba(245, 194, 66, 0.35), 0 4px 18px rgba(245, 194, 66, 0.14);
  --glow-gold-md: 0 0 0 1px rgba(245, 194, 66, 0.5), 0 10px 34px rgba(245, 194, 66, 0.22);
  --glow-gold-lg: 0 0 60px rgba(245, 194, 66, 0.28);
  --glow-crimson: 0 0 48px rgba(196, 30, 42, 0.35);

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);

  /* --- Typography --- */
  --font-display: "Rajdhani", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;
  --fs-5xl: 3.25rem;

  --lh-tight: 1.15;
  --lh-snug: 1.32;
  --lh-normal: 1.65;

  /* --- Spacing --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  /* --- Radii --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* --- Layout --- */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --header-h: 68px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 620ms;

  /* --- Z-index --- */
  --z-bg: 0;
  --z-base: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-drawer: 90;
  --z-skip: 100;
}

@media (min-width: 768px) {
  :root {
    --fs-4xl: 3.25rem;
    --fs-5xl: 4.25rem;
    --header-h: 76px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-5xl: 4.75rem;
  }
}