:root {
  /* Colors — DESIGN-apple.md §2 */
  --color-action-blue: #0066cc;
  --color-focus-blue: #0071e3;
  --color-near-black-ink: #1d1d1f;
  --color-sky-link-blue: #2997ff;
  --color-pearl-button: #fafafc;
  --color-soft-chip-gray: rgba(210, 210, 215, 0.64);
  --color-pure-white: #ffffff;
  --color-parchment: #f5f5f7;
  --color-tile-1: #272729;
  --color-tile-2: #2a2a2c;
  --color-tile-3: #252527;
  --color-pure-black: #000000;
  --color-paper-white: #ffffff;
  --color-muted-ink-80: rgba(0, 0, 0, 0.8);
  --color-muted-ink-48: rgba(0, 0, 0, 0.48);
  --color-divider-4: rgba(0, 0, 0, 0.04);
  --color-hairline: rgba(0, 0, 0, 0.08);
  --color-destructive: #b3261e;

  /* Discipline palette */
  --color-disc-alpine: #6b8aa8;
  --color-disc-moguls: #c79844;
  --color-disc-freeskiing: #8b6fa8;
  --color-disc-snowboard: #4a8a8a;
  --color-disc-cross-country: #6ba36b;
  --color-disc-jump-nordic: #b07e6c;
  --color-disc-cycling: #5a8c5a;
  --color-disc-youth-development: #9a9a8a;
  --color-disc-other: #888888;

  /* Type — DESIGN-apple.md §3 + monospace for code/tabular bits */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;

  /* Neutral ramp for Vercel-style surfaces (subtle borders, hover
     backgrounds, badge fills). Action Blue stays the primary accent. */
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f4f4f5;
  --color-neutral-200: #e4e4e7;
  --color-neutral-300: #d4d4d8;
  --color-neutral-500: #71717a;
  --color-neutral-700: #3f3f46;
  --color-neutral-900: #18181b;

  /* Spacing — DESIGN-apple.md §5 */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radii — DESIGN-apple.md §5 (sharpened to Vercel scale: 6/8/12).
     Pill stays full-round at 980px. Apple's 18px radius is preserved
     for marketing-style hero panels via .tile-card-soft when desired. */
  --radius-utility: 6px;
  --radius-pearl: 8px;
  --radius-card: 12px;
  --radius-card-soft: 18px;
  --radius-pill: 980px;

  /* Elevation — DESIGN-apple.md §6 */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;

  /* Breakpoints — DESIGN-apple.md §8 */
  --bp-phone-sm: 419px;
  --bp-phone: 640px;
  --bp-tablet: 834px;
  --bp-desktop-sm: 1068px;
  --bp-desktop: 1440px;
}