/* ==========================================================================
   P77 Game — Design Tokens
   Theme: "Podium Royale" — a luxury motorsport lounge at a night race.
   Obsidian = the track under floodlights. Burgundy = the racing livery.
   Champagne gold = the trophy, the trim, the podium spotlight.
   ========================================================================== */

:root {
  /* --- Base: night-track asphalt ------------------------------------------ */
  --color-obsidian: #0B0908;
  --color-obsidian-panel: #171210;
  --color-obsidian-elevated: #221B17;
  --color-obsidian-border: #2C2118;
  --color-obsidian-sunk: #0E0B0A;

  /* --- Burgundy: racing livery -------------------------------------------- */
  --color-burgundy-livery: #7A1420;
  --color-burgundy-stripe: #9B1F2E;
  --color-burgundy-deep: #4E0C15;
  --color-burgundy-ink: #340810;

  /* --- Champagne gold: trophy, trim, podium spotlight --------------------- */
  --color-gold-trophy: #D9AE5E;
  --color-gold-podium: #F0CE85;
  --color-gold-deep: #A97F35;
  --color-gold-trophy-a: rgba(217, 174, 94, 0.32);
  --color-gold-faint-a: rgba(217, 174, 94, 0.12);
  --color-gold-hair-a: rgba(217, 174, 94, 0.22);
  --color-burgundy-a: rgba(155, 31, 46, 0.4);
  --color-burgundy-faint-a: rgba(155, 31, 46, 0.14);

  /* --- Text & neutrals ---------------------------------------------------- */
  --color-text-primary: #F4ECDD;
  --color-text-secondary: #C6B69F;
  --color-text-muted: #9B8C77;
  --color-text-on-gold: #1A1109;

  /* --- Functional --------------------------------------------------------- */
  --color-success: #57A06B;
  --color-warning: #D0912E;
  --color-danger: #E2685C;
  --color-telegram: #2AABEE;

  /* --- Gradients ---------------------------------------------------------- */
  --grad-primary: linear-gradient(118deg, var(--color-burgundy-livery) 0%, var(--color-burgundy-stripe) 34%, var(--color-gold-trophy) 100%);
  --grad-gold: linear-gradient(120deg, var(--color-gold-deep) 0%, var(--color-gold-podium) 46%, var(--color-gold-trophy) 100%);
  --grad-livery: linear-gradient(160deg, var(--color-obsidian-panel) 0%, var(--color-obsidian-sunk) 100%);
  --grad-riser: linear-gradient(180deg, var(--color-obsidian-elevated) 0%, var(--color-burgundy-ink) 100%);
  --grad-text-gold: linear-gradient(96deg, var(--color-gold-trophy) 0%, var(--color-gold-podium) 42%, var(--color-gold-deep) 100%);

  /* Side-lit floodlight wash — night-race stadium lighting from the left. */
  --wash-floodlight:
    linear-gradient(115deg, rgba(240, 206, 133, 0.10) 0%, rgba(240, 206, 133, 0) 15%),
    radial-gradient(ellipse at 15% 50%, rgba(122, 20, 32, 0.40) 0%, rgba(122, 20, 32, 0) 45%);

  /* --- Effects ------------------------------------------------------------ */
  --shadow-card: 0 10px 34px rgba(0, 0, 0, 0.65);
  --shadow-lift: 0 20px 54px rgba(0, 0, 0, 0.78);
  --shadow-glow-gold: 0 0 28px var(--color-gold-trophy-a);
  --shadow-glow-burgundy: 0 0 28px var(--color-burgundy-a);
  --shadow-inset-hair: inset 0 1px 0 rgba(244, 236, 221, 0.06);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Typography --------------------------------------------------------- */
  --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.25rem, 8.2vw, 4.25rem);
  --fs-h1: clamp(2rem, 6.6vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 5.2vw, 2.55rem);
  --fs-h3: clamp(1.24rem, 3.6vw, 1.6rem);
  --fs-h4: clamp(1.06rem, 2.8vw, 1.22rem);
  --fs-lead: clamp(1.02rem, 2.6vw, 1.16rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;
  --fs-numeral: clamp(2.6rem, 11vw, 5.2rem);

  --lh-tight: 1.06;
  --lh-heading: 1.16;
  --lh-body: 1.72;

  --track-display: 0.02em;
  --track-eyebrow: 0.26em;
  --track-numeral: 0.04em;

  /* --- Layout ------------------------------------------------------------- */
  --shell-max: 1240px;
  --shell-wide: 1400px;
  --gutter: 20px;
  --gutter-md: 40px;
  --gutter-lg: 64px;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 80px;
  --space-3xl: 108px;

  --nav-h: 66px;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out-race: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid: 380ms;
  --dur-slow: 760ms;

  /* --- Logo geometry ------------------------------------------------------
     The supplied logo.png is 1536x1024 with the artwork occupying the box
     x:111–1470, y:363–622. These ratios let CSS frame the artwork without
     ever touching, recolouring or re-exporting a single logo pixel.
     ---------------------------------------------------------------------- */
  --logo-ink-ratio: 5.2308;   /* artwork width / artwork height */
  --logo-scale-w: 5.9077;     /* full image width  / artwork height */
  --logo-scale-h: 3.9385;     /* full image height / artwork height */
  --logo-offset-x: -0.4269;   /* left offset / artwork height */
  --logo-offset-y: -1.3962;   /* top offset  / artwork height */
}

@media (min-width: 768px) {
  :root {
    --nav-h: 76px;
    --gutter: var(--gutter-md);
  }
}

@media (min-width: 1200px) {
  :root {
    --nav-h: 84px;
    --gutter: var(--gutter-lg);
  }
}