/* ==========================================================================
   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) ---
     Wine-black base: a touch more magenta than the raw crest sample, which
     separates the surface tiers and lets the gold read hotter against them. */
  --color-bg: #14040b;
  --color-bg-elev: #23070f;
  --color-surface: #370c16;
  --color-surface-2: #4a0c18;

  /* --- Brand gold (logo wordmark gradient, top -> bottom) --- */
  --color-accent-hi: #ffe9a3;
  --color-accent: #f7c948;
  --color-accent-dim: #ce9730;
  --color-accent-deep: #b8801f;

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

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

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

  /* --- Glass surfaces --- */
  --glass-bg: rgba(55, 12, 22, 0.55);
  --glass-bg-strong: rgba(35, 7, 15, 0.85);
  --glass-border: rgba(247, 201, 72, 0.16);
  --glass-border-hover: rgba(247, 201, 72, 0.55);
  --glass-blur: 14px;

  /* Hairline highlight along the top edge of a raised surface — the single
     detail that stops the glass panels reading flat. */
  --edge-light: linear-gradient(
    90deg,
    transparent 0%,
    rgba(247, 201, 72, 0.05) 12%,
    rgba(255, 233, 163, 0.5) 50%,
    rgba(247, 201, 72, 0.05) 88%,
    transparent 100%
  );

  /* --- Gradients --- */
  --grad-gold: linear-gradient(180deg, #ffe9a3 0%, #f7c948 48%, #ce9730 100%);
  --grad-gold-text: linear-gradient(180deg, #fff0b8 0%, #f7c948 55%, #dba934 100%);
  --grad-crimson: linear-gradient(135deg, #c41e2a 0%, #6b1230 100%);
  --grad-surface: linear-gradient(160deg, rgba(74, 12, 24, 0.9) 0%, rgba(20, 4, 11, 0.9) 100%);
  --grad-rule: linear-gradient(90deg, transparent, var(--color-accent), transparent);

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

  /* --- Shadows (warm-tinted rather than neutral black, so raised surfaces
     sit in the palette instead of punching a grey hole in it) --- */
  --shadow-sm: 0 2px 8px rgba(8, 1, 5, 0.45);
  --shadow-md: 0 10px 30px rgba(8, 1, 5, 0.55);
  --shadow-lg: 0 24px 60px rgba(8, 1, 5, 0.66);

  /* --- 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: 7px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --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;
  }
}