:root {
  --cobalt-900: #0a2540;
  --cobalt-700: #173a73;
  --cobalt-500: #2b5fbf;
  --cobalt-300: #6e96e0;
  --cobalt-100: #e1ebfa;

  --canary-500: #f7e733;
  --canary-300: #fff48a;

  --suit-red: #c93a3a;
  --suit-black: #181818;

  --bg: #f6f7fb;
  --surface: #ffffff;
  --border: #d8dce6;

  --text: #1a1f2e;
  --text-muted: #6b7280;

  --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --shadow-sm: 2px 2px 0 rgba(10, 37, 64, 0.12);
  --shadow-md: 4px 4px 0 rgba(10, 37, 64, 0.15);
  --shadow-lg: 6px 6px 0 rgba(10, 37, 64, 0.18);
}