/*
  DIRECTION CONTRACT v5 (final — pinned to a concrete reference build, see DESIGN.md)

  THESIS: This is TROPA DO BK's own premium landing page, built from a reference
  implementation the user commissioned and approved — not an invented aesthetic.
  Ports its exact tokens/structure into our PHP + live-data backend.
  OWN-WORLD: Neutral near-black ground (blue-black, never brown/gold-tinted —
  that was v1-v4's recurring mistake). Borders and panels are white-transparency
  based, neutral. Color is reserved for real accents only: gold/orange for the
  brand and hero numbers, lime/cyan/green as rare highlight flashes. Real
  character art (bk-cartoon.png, tropa-bk-text.png) carries the persona, not
  invented background shapes.
  STORY: Same as before — a visitor lands mid-competition, reads who's winning,
  what's at stake, and checks back to watch their position move.
  FIRST VIEWPORT: Eyebrow pill (live dot) > two-tone H1 (outline "Corrida do" +
  gradient "Faturamento") > lead paragraph > CTA buttons > mini-stats, beside a
  glowing hero-art column with the real mascot art, a floating logo, and two
  floating status/prize chips.
  FORM: Pinned directly to a reference file at
  "Breno Corrida/Exemplo de pagina/index.html" that the user commissioned and
  pointed us to — colors, spacing, component shapes, and animation timings
  are read from that file's actual CSS values, not re-derived.
*/

:root {
  /* ground — neutral, NEVER brown/gold-tinted (v1-v4's recurring mistake) */
  --bg: #070a0d;
  --panel: #0e1419;
  --panel-2: #111920;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .14);

  --ink: #f8fbff;
  --muted: #8f9da9;
  --faint: #6a7780;

  /* accents — used sparingly and deliberately, never tinting neutrals */
  --gold: #ffcb35;
  --gold-2: #ff8a00;
  --gold-gradient: linear-gradient(100deg, #fff4b6 0%, #ffd633 28%, #ff8d00 60%, #ffdb3d 95%);
  --lime: #dfff00;
  --green: #49e86f;
  --cyan: #4ddcff;
  --red: #ff3c3c;

  --influencer: #ffcb35;
  --gerente: #4ddcff;

  --font-display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;

  --shadow-card: 0 24px 80px rgba(0, 0, 0, .45);
  --shadow-gold-glow: 0 14px 36px rgba(255, 156, 0, .18);

  --ease-track: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .8, .2, 1);

  --container: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-track: linear;
    --ease-spring: linear;
  }
}