/* Design tokens — extracted from the Figma source (millennialbet 2.fig) */

:root {
  /* --- colour roles --- */
  --ink: #090a0f;            /* primary dark canvas */
  --ink-soft: #111827;       /* body text on light */
  --surface: #111622;        /* raised panel on dark */
  --surface-2: #1a1b23;      /* second raised level */
  --surface-3: #1c2434;
  --bone: #faf9f6;           /* light canvas */
  --white: #ffffff;
  --red: #e11d48;            /* accent / CTA / warning — fills, borders, large type */

  /* --red is 3.85–4.46:1 against the site's surfaces: fine for fills and large
     type, short of AA for body-size text. --red-text is the reading variant and
     re-declares itself per surface, so a rule can just use var(--red-text). */
  --red-text: #ff5c78;       /* on ink / surface — 6.6:1 / 6.1:1 */
  --red-dark: #be1540;
  --slate: #94a3b8;          /* secondary text on dark */
  --slate-light: #cbd5e1;
  --slate-dark: #475569;
  --grey: #6b7280;           /* secondary text on light */
  --grey-light: #9ca3af;
  --line-dark: #1f2937;      /* hairline on dark */
  --line-light: #e5e7eb;     /* hairline on light */
  --green: #10b981;
  --green-bright: #00ff88;

  --ink-a60: rgba(9, 10, 15, .6);
  --ink-a55: rgba(9, 10, 15, .55);
  --ink-a30: rgba(9, 10, 15, .3);
  --ink-a15: rgba(9, 10, 15, .15);
  --ink-a10: rgba(9, 10, 15, .1);

  /* --- type --- */
  --font-display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --font-alt: 'Archivo', system-ui, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- spacing scale (8px grid) --- */
  --s-2: 2px;   --s-4: 4px;   --s-6: 6px;   --s-8: 8px;   --s-10: 10px;
  --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-28: 28px;
  --s-32: 32px; --s-40: 40px; --s-48: 48px; --s-64: 64px; --s-80: 80px; --s-96: 96px;

  /* --- radii --- */
  --r-4: 4px; --r-6: 6px; --r-8: 8px; --r-10: 10px; --r-12: 12px;
  --r-16: 16px; --r-20: 20px; --r-24: 24px; --r-36: 36px; --r-40: 40px;
  --r-pill: 99px;

  /* --- elevation --- */
  --shadow-card: 0 8px 16px 0 rgba(0, 0, 0, .25);
  --shadow-red: 0 8px 16px 0 rgba(225, 29, 72, .25);
  --shadow-panel: 0 16px 32px -4px rgba(0, 0, 0, .5);
  --shadow-modal: 0 32px 64px -8px rgba(0, 0, 0, .7);
  --shadow-deep: 0 24px 64px -12px rgba(0, 0, 0, .8);

  /* --- layout --- */
  --page: 1440px;
  --gutter: 48px;
  --content: 1344px;         /* --page minus gutters */

  /* --- motion --- */
  --t-fast: .16s cubic-bezier(.4, 0, .2, 1);
  --t: .24s cubic-bezier(.4, 0, .2, 1);
  --t-slow: .4s cubic-bezier(.4, 0, .2, 1);
}

/* Light surfaces need the dark reading red instead */
.section--bone,
.legal-section--bone,
.legal-document,
.walk--light,
.walk--slip,
.walk--ticket,
.card,
.info-card:not(.info-card--ink),
.rw-card,
.rw__support,
.jump-card,
.board__list,
.bs-step,
.bs-scope,
.help-direct,
.contact-details,
.contact-form,
.step__path,
.rg-check,
.promo-float,
.sd-badge,
.sd-module--rg,
.legal-toc,
.dl-count,
.dl-period,
.dl-prompt,
.dl-notice,
.dl-history,
.dl-bs-card--light,
.limit-panel,
.help-workspace,
.accordion,
.walk--light,
.payment-strip,
.limit-panel .field__control,
.modal__panel--prefs .pref {
  --red-text: #c2123c;       /* on bone / white — 5.8:1 / 6.1:1 */
}

/* Dark panels nested inside a light section take the light reading red back off */
.sd-module--balance,
.promo-card--sports,
.walk--dark,
.walk--submit,
.info-card--ink,
.dl-count--dark,
.dl-bs-card--dark,
.dl-status,
.dl-change__panel,
.dl-summary,
.betstop-inset,
.status-card,
.change-card,
.rg-tool,
.rg-duty,
.slip,
.scoreboard,
.racing-link,
.rw-card--dark {
  --red-text: #ff5c78;
}

/* Red fills read best with white text: ink on --red is only 4.21:1 */
.section--red,
.rg-band__warning,
.promo-card--racing,
.promo-featured__box,
.sd-module--account,
.step--02,
.jump-card--live {
  --red-text: var(--white);
}

@media (max-width: 1199px) {
  :root {
    --gutter: 16px;
    --content: 358px;
  }
}