:root {
  /* Light on every page (CR-012). Dark values were the original 03 §1 palette; see CR-008 for the research. */
  /* ---------- Surfaces ---------- */
  --cst-bg:            #F3F4F6;   /* page */
  --cst-surface:       #FFFFFF;   /* cards, panels, rows */
  --cst-surface-2:     #EEF0F3;   /* hover, selected, elevated */
  --cst-surface-3:     #FFFFFF;   /* inputs (bordered) */

  /* ---------- Brand ---------- */
  --cst-red:           #D7263D;   /* primary CTA, brand accent. OURS. */
  --cst-red-hover:     #A81B30;
  --cst-red-dim:       rgba(215, 38, 61, 0.10);  /* tinted fills, focus halos */
  --cst-gold:          #8F6B12;   /* reserved: SOLD OUT, premium tiers. Darkened so it reads on white */
  --cst-gold-dim:      rgba(200, 162, 74, 0.18);

  /* ---------- Text ---------- */
  --cst-text:          #111214;   /* headlines, athlete names, prices */
  --cst-text-2:        #4A4F57;   /* metadata, labels, secondary copy (8.4:1 on white) */
  --cst-text-3:        #6B7079;   /* timestamps, legal, disabled (5:1 on white) */

  /* ---------- Lines ---------- */
  --cst-border:        #D6D9DF;   /* 1px hairlines, card edges, table rules */
  --cst-border-strong: #B4B9C2;

  /* ---------- Ticket status (semantic — NOT brand red) ---------- */
  --cst-available:     #1C7A37;
  --cst-available-dim: rgba(47, 168, 79, 0.14);
  --cst-held:          #8F5A00;
  --cst-held-dim:      rgba(224, 163, 58, 0.20);
  --cst-sold:          #5C6169;   /* muted grey, never red */
  --cst-sold-dim:      rgba(92, 97, 105, 0.12);
  --cst-comped:        #345877;
  --cst-comped-dim:    rgba(91, 124, 153, 0.16);

  /* ---------- Feedback ---------- */
  --cst-danger:        #C21F35;   /* destructive actions — ghost outline only, never solid */
  --cst-warning:       #8F5A00;
  --cst-success:       #1C7A37;

  /* ---------- Type ---------- */
  --cst-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cst-display-wght: 900;
  --cst-display-wdth: 62;      /* condensed */
  --cst-body-wght:    400;
  --cst-body-wdth:    100;     /* normal */

  /* ---------- Spacing (4px base) ---------- */
  --cst-s1:  4px;
  --cst-s2:  8px;
  --cst-s3:  12px;
  --cst-s4:  16px;
  --cst-s5:  24px;
  --cst-s6:  32px;
  --cst-s7:  48px;
  --cst-s8:  64px;
  --cst-s9:  96px;

  /* ---------- Radius — sharp is the point ---------- */
  --cst-radius:     0px;
  --cst-radius-sm:  2px;   /* the absolute maximum anywhere in the app */

  /* ---------- Motion ---------- */
  --cst-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --cst-dur-fast:  120ms;
  --cst-dur:       180ms;

  /* ---------- Elevation ---------- */
  --cst-shadow:    0 1px 2px rgba(17, 18, 20, 0.06), 0 1px 3px rgba(17, 18, 20, 0.08);
  --cst-shadow-lg: 0 12px 32px rgba(17, 18, 20, 0.18);

  /* ---------- Layout ---------- */
  --cst-maxw:      1180px;
  --cst-gutter:    16px;
}

/* ======================================================================
   Extensions — derived from the design spec's prose (§4) so that no
   color literal appears anywhere outside this file.
   ====================================================================== */
:root {
  color-scheme: light;
  /* The hero is the one dark band: text sits on a photo under a dark scrim. */
  --cst-scrim: linear-gradient(to top, rgba(10, 10, 11, 0.96) 0%, rgba(10, 10, 11, 0.70) 35%, rgba(10, 10, 11, 0.15) 70%, transparent 100%);
  --cst-scrim-hover: linear-gradient(to top, rgba(10, 10, 11, 0.98) 0%, rgba(10, 10, 11, 0.80) 40%, rgba(10, 10, 11, 0.30) 75%, transparent 100%);
  --cst-hero-bg: #16181B;
  --cst-footer-bg: #0A0A0B;       /* near-black homepage footer (CR-020) */
  --cst-on-photo: #FFFFFF;
  --cst-on-photo-2: #D5D8DD;
  --cst-on-photo-3: #A9ACB2;
  --cst-stripe: rgba(255, 255, 255, 0.04);  /* hero fallback pattern, on --cst-hero-bg */
  --cst-backdrop: rgba(17, 18, 20, 0.55);
  --cst-button-2: #16181B;        /* secondary button fill: red is primary, black secondary (CR-011) */
  --cst-button-2-hover: #33363C;
  --cst-on-button-2: #FFFFFF;     /* text on secondary buttons */
  --cst-tab: #E1E4E9;             /* event tabs that aren't current (CR-014) */
  --cst-on-red: #FFFFFF;  /* text and marks on red */
  --cst-paper: #16181B;   /* the one element that must pop off the light page: the selected-tickets bar (CR-012: was white on the dark page) */
  --cst-ink: #FFFFFF;     /* text on --cst-paper */
  --cst-ink-2: #C9CDD3;   /* secondary text on --cst-paper */
  --cst-tap: 44px;        /* minimum tap target */
  --cst-control-h: 48px;  /* buttons and inputs on mobile */
}