:root {
  --brand: #d8232a;
  --brand-hover: #9e1319;
  --brand-contrast: #ffffff;

  --accent: #4f86ff;
  --accent-deep: #1f4fd8;

  --brand-tint-strong: color-mix(in srgb, var(--brand) 65%, #0f1422);
  --brand-tint-soft: color-mix(in srgb, var(--brand) 22%, #0f1422);
  --brand-tint-faint: color-mix(in srgb, var(--brand) 12%, transparent);

  --page-bg: #07090f;
  --surface: #0f1422;
  --surface-alt: #0a1a3f;
  --surface-hover: #161d30;

  --text: #ffffff;
  --text-muted: #c4cad8;
  --text-faint: rgba(196, 202, 216, 0.38);

  --border: rgba(79, 134, 255, 0.22);
  --border-dim: rgba(31, 79, 216, 0.2);
  --border-strong: rgba(79, 134, 255, 0.45);

  --unavailable-bg: rgba(255, 255, 255, 0.05);
  --unavailable-hatch: color-mix(in srgb, var(--text) 12%, transparent);

  --radius-card: 16px;
  --radius-control: 8px;
  --radius-badge: 4px;
  --radius-pill: 9999px;

  --shadow-card:
    0 16px 40px rgba(0, 0, 0, 0.55), 0 0 1px rgba(79, 134, 255, 0.25);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-brand: 0 8px 24px rgba(216, 35, 42, 0.38);

  --font-heading: "Bebas Neue", "Anton", Impact, sans-serif;
  --font-body:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --container: 1240px;
}