:root{
  --radius-xs: 4px;
  --radius-sm: 8px;     /* buttons, fields, chips */
  --radius-md: 12px;    /* cards, media */
  --radius-lg: 16px;    /* large panels */
  --radius-xl: 24px;    /* hero media, bands */
  --radius-pill: 999px;

  --border-width: 1px; /* @kind other */
  --border-width-strong: 2px; /* @kind other */
  --hairline: 1px solid var(--border-subtle); /* @kind other */
  --hairline-strong: 1px solid var(--border-default); /* @kind other */

  /* Soft, warm-tinted elevation. Only things that genuinely float get one. */
  --shadow-xs: 0 1px 2px rgba(20,18,15,.06);
  --shadow-sm: 0 1px 2px rgba(20,18,15,.05), 0 2px 6px -2px rgba(20,18,15,.08);
  --shadow-md: 0 4px 8px -4px rgba(20,18,15,.08), 0 12px 24px -10px rgba(20,18,15,.12);
  --shadow-lg: 0 8px 16px -8px rgba(20,18,15,.10), 0 28px 56px -20px rgba(20,18,15,.18);
  --shadow-focus: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus-ring);

  --ease-out: cubic-bezier(.22,.8,.3,1); /* @kind other */
  --ease-in-out: cubic-bezier(.5,0,.3,1); /* @kind other */
  --dur-1: 120ms; /* @kind other */
  --dur-2: 200ms; /* @kind other */
  --dur-3: 320ms; /* @kind other */
  --dur-4: 520ms; /* @kind other */
  --transition-control: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); /* @kind other */
  --transition-lift: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out); /* @kind other */

  /* Brand motifs, drawn from the prize-wheel mark. */
  --motif-wheel: repeating-conic-gradient(from 0deg, rgba(255,255,255,.055) 0deg 11deg, rgba(255,255,255,0) 11deg 22deg); /* @kind color */
  --motif-halftone: radial-gradient(rgba(243,170,3,.30) 1.4px, transparent 1.5px); /* @kind color */
  --motif-halftone-size: 12px 12px;
  --motif-rule-accent: linear-gradient(90deg, var(--amber-400) 0%, var(--red-500) 100%); /* @kind color */
}