/* ============================================================
   tokens.css — two-x dark design system
   Mirrors the Figma "Football Prediction" variables.
   Single source of truth for colour, radius and gradients.
============================================================ */
:root{
  /* surfaces & backgrounds */
  --bg-surface:#11161D; --bg-100:#181F29; --bg-200:#1C212E; --bg-300:#212838;
  --bg-400:#272E3F; --bg-500:#2E3545; --bg-600:#343B4A;
  --bg-primary-400:#0D1833; --bg-primary-500:#112045; --bg-primary-600:#0F1D3D;
  --bg-critical-500:#352129; --bg-approve-500:#15241F; --bg-warning-400:#2A2616;

  /* text */
  --tx-100:#FFFFFF; --tx-200:#EBEFFA; --tx-300:#DADFEA; --tx-400:#8891A8; --tx-500:#747B8F;
  --tx-primary-300:#C5D6FF; --tx-critical:#FF7583; --tx-approve:#4EF1A3; --tx-warning:#FFCB92;

  /* strokes */
  --st-100:#1F2534; --st-200:#212838; --st-300:#272E3F; --st-400:#2E3545; --st-500:#343B4A;
  --st-primary:#3A6AE6; --st-approve:#1F6041; --st-critical:#CC5E7B;

  /* icon */
  --ic-200:#BEC6D9;

  /* gradients */
  --grad:linear-gradient(95deg,#A69CFF 0%,#5B6FE6 45%,#2A4BD1 100%);
  --grad-hero:radial-gradient(120% 80% at 50% -10%,rgba(120,98,222,.40),rgba(40,40,80,0) 60%);

  /* radius */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:200px;
}