/*
  WHOOPS Bounty Hunter — design tokens
  Dark casino sub-brand. Red/yellow hues match the live whoops.be
  brand palette (see WHOOPS LIVE/index.html --red/--yellow) so the
  app ties back visually even though the surface is black, not cream.
*/
:root{
  /* brand accents (shared with whoops.be) */
  --color-yellow: #FFC107;
  --color-yellow-bright: #FFD43B;
  --color-yellow-deep: #C79100;
  --color-red: #E8231A;
  --color-red-bright: #FF3B5C;
  --color-red-deep: #8f001d;

  /* casino surfaces (unique to Bounty Hunter) */
  --color-bg: #0b0b0b;
  --color-bg-2: #060606;
  --color-panel: #161616;
  --color-panel-2: #1f1f1f;
  --color-line: #2a2a2a;
  --color-line-soft: #232323;

  /* glossy surface gradients — replace flat panel fills where a card
     should read as "cabinet metal" rather than "dashboard box" */
  --grad-panel: linear-gradient(160deg, #232323 0%, #161616 45%, #0d0d0d 100%);
  --grad-panel-raised: linear-gradient(160deg, #2e2e2e 0%, #1a1a1a 50%, #0e0e0e 100%);
  --grad-gold: linear-gradient(180deg, var(--color-yellow-bright) 0%, var(--color-yellow) 55%, var(--color-yellow-deep) 100%);
  --grad-gold-sheen: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.5) 42%, transparent 60%);
  --grad-red: linear-gradient(180deg, #ff6c87 0%, var(--color-red-bright) 34%, var(--color-red) 70%, #7e0018 100%);
  /* Layer order matters: the first layer paints on TOP, so the vignette is
     listed first to darken the edges of the warm glows beneath it. That
     keeps the eye on the centre column instead of the page edges. */
  --grad-hero-glow: radial-gradient(ellipse 130% 85% at 50% 42%, transparent 34%, rgba(0,0,0,.55) 100%),
                     radial-gradient(ellipse 85% 55% at 20% 0%, rgba(255,193,7,.2), transparent 62%),
                     radial-gradient(ellipse 75% 50% at 100% 26%, rgba(232,35,26,.17), transparent 62%),
                     radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255,120,40,.09), transparent 70%);

  /* text */
  --color-text: #f5f2ea;
  --color-text-dim: #b9b3a6;
  --color-text-mute: #7a7468;
  --color-on-yellow: #171208;

  /* semantic */
  --color-success: #2ecc71;
  --color-info: #1f6feb;

  /* rarity (reward tiles / wallet cards) */
  --rarity-standard: #3a3a3a;
  --rarity-jackpot: var(--color-yellow);
  --rarity-premium: #b478ff;

  /* type */
  --font-display: "Anton", "Arial Black", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;

  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* shadow */
  --shadow-panel: inset 0 1px 2px rgba(255,255,255,.06), inset 0 -3px 8px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4);
  --shadow-cabinet:
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -6px 14px rgba(0,0,0,.65),
    0 0 0 3px #0c0c0c, 0 0 0 6px var(--color-yellow), 0 0 0 9px var(--color-red),
    0 26px 48px rgba(0,0,0,.55), 0 12px 26px rgba(228,0,43,.32);
  --shadow-glow-yellow: 0 0 24px rgba(255,193,7,.55);
  --shadow-glow-red: 0 0 24px rgba(232,35,26,.5);
  --shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px rgba(0,0,0,.5);
  --shadow-card-hover: 0 1px 0 rgba(255,255,255,.08) inset, 0 16px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(255,193,7,.25);
  --shadow-btn-yellow: 0 8px 0 #8a6400, 0 16px 28px rgba(255,193,7,.35), inset 0 1px 0 rgba(255,255,255,.5);
  --shadow-btn-yellow-active: 0 3px 0 #8a6400, 0 6px 14px rgba(255,193,7,.3), inset 0 1px 0 rgba(255,255,255,.4);
  --shadow-btn-red: 0 8px 0 #64000f, 0 16px 28px rgba(232,35,26,.4), inset 0 1px 0 rgba(255,255,255,.3);
  --shadow-btn-red-active: 0 3px 0 #64000f, 0 6px 14px rgba(232,35,26,.35), inset 0 1px 0 rgba(255,255,255,.25);

  /* motion */
  --ease-pop: cubic-bezier(.3,1.5,.5,1);
  --ease-out: cubic-bezier(.28,.86,.42,1);
  --dur-fast: .15s;
  --dur-med: .3s;
  --dur-slow: .6s;

  /* layout */
  --max-w: 480px;         /* mobile-first content column */
  --max-w-desktop: 1180px;
  --nav-h-top: 76px;
  --nav-h-bottom: 68px;
  --nav-h-mobile-header: 58px;
}