:root {
  /* ── Text ──────────────────────────────────────────────── */
  --color-text-subtle: #6b7682;
  --color-text-base: #353b42;
  --color-text-strong: #181b1f;
  --color-text-brand: #244083;
  --color-text-magic: #c46a00;
  --color-text-adaptive: #ffffff;
  --color-text-success: #8cb242;
  --color-text-warning: #a55500;
  --color-text-info: #184ea8;
  --color-text-critical: #FC4439;
  --color-text-placeholder: #bec5cc;

  /* ── Icon ──────────────────────────────────────────────── */
  --color-icon-light: #bec5cc;
  --color-icon-subtle: #8996a3;
  --color-icon-base: #6b7682;

  /* ── Background & surface ──────────────────────────────── */
  --color-bg-page: #fafbfc;
  --color-bg-surface: #ffffff;
  --color-bg-surface-subtle: #ffffff;
  --color-bg-fill-strong: #f2f5f7;
  --color-bg-fill-brand: #244083;
  --color-bg-fill-magic: #c46a00;
  --color-bg-fill-success: #8cb242;
  --color-bg-fill-critical: #fc4439;
  --color-bg-fill-warning: #f59e0b;
  --color-bg-ink: #181b1f;
  --color-bg-ink-blue: #274975;
  --color-bg-ink-deep: #1d2430;
  --color-bg-fill-brand-soft: #c0d0ec;
  --color-bg-fill-success-soft: #edf5e0;
  --color-bg-fill-magic-soft: color-mix(in srgb, var(--color-bg-fill-magic) 12%, white);
  --color-bg-fill-critical-soft: color-mix(in srgb, var(--color-bg-fill-critical) 12%, white);
  --color-bg-fill-warning-soft: #fef3c7;
  --color-bg-fill-info-soft: #dbeafe;
  --color-bg-fill-info-subtle: #e7ecf6;
  /* Status tint backgrounds (14% opacity fills for pills/tags) */
  --color-bg-fill-warning-tint: rgba(217, 119, 6, 0.14);
  --color-bg-fill-info-tint: rgba(37, 99, 235, 0.14);
  --color-bg-fill-success-tint: rgba(138, 181, 63, 0.14);
  /* Bronze/tier tint (untokenized in Figma — added for tier pill component) */
  --color-bg-fill-bronze-tint: #ffe9cc;
  --color-border-bronze-tint: #ffb459;

  /* ── Border ────────────────────────────────────────────── */
  --color-border-base: #d5dbe0;
  --color-border-subtle: #e9edf2;
  --color-border-strong: #8996a3;
  --color-border-focus: #244083;
  --color-border-brand-soft: #9ab0d8;
  --color-border-success-soft: #c7dea8;
  --color-border-magic-soft: color-mix(in srgb, var(--color-bg-fill-magic) 35%, white);
  --color-border-critical-soft: color-mix(in srgb, var(--color-bg-fill-critical) 35%, white);

  /* ── Overlays ──────────────────────────────────────────── */
  --overlay-surface: rgba(37, 41, 46, 0.5);
  --overlay-hero: rgba(24, 27, 31, 0.45);
  --overlay-brand-8: rgba(36, 64, 131, 0.08);
  --overlay-brand-6: rgba(36, 64, 131, 0.06);
  --overlay-brand-18: rgba(36, 64, 131, 0.18);
  --overlay-brand-16: rgba(36, 64, 131, 0.16);
  --overlay-brand-5: rgba(36, 64, 131, 0.05);
  --overlay-brand-4: rgba(36, 64, 131, 0.04);
  --overlay-brand-3: rgba(36, 64, 131, 0.03);
  --overlay-brand-80: rgba(36, 64, 131, 0.8);
  --overlay-brand-90: rgba(36, 64, 131, 0.9);
  --overlay-magic-8: rgba(196, 106, 0, 0.08);
  --overlay-white-85: rgba(255, 255, 255, 0.85);
  --overlay-white-80: rgba(255, 255, 255, 0.8);
  --overlay-white-72: rgba(255, 255, 255, 0.72);
  --overlay-white-50: rgba(255, 255, 255, 0.5);
  --overlay-white-45: rgba(255, 255, 255, 0.45);
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-2: rgba(255, 255, 255, 0.02);
  --overlay-ink-78: rgba(11, 15, 21, 0.78);
  --overlay-ink-42: rgba(24, 27, 31, 0.42);
  --overlay-neutral-22: rgba(137, 150, 163, 0.22);
  --overlay-border-base-72: rgba(213, 219, 224, 0.72);
  --overlay-teal-6: rgba(38, 88, 122, 0.06);

  /* ── Gradient ──────────────────────────────────────────── */
  --gradient-page-shell: linear-gradient(90deg, var(--color-bg-ink) 0%, var(--color-bg-ink-blue) 100%);

  /* ── Shadow ────────────────────────────────────────────── */
  --shadow-100: 0 0 2px rgba(120, 137, 154, 0.32), 0 1px 2px rgba(96, 110, 124, 0.14);
  --shadow-400: 0 0 2px rgba(120, 137, 154, 0.32), 0 8px 16px rgba(96, 110, 124, 0.14);

  /* ── Radius ────────────────────────────────────────────── */
  --radius-200: 4px;
  --radius-300: 6px;
  --radius-400: 8px;
  --radius-500: 12px;
  --radius-600: 16px;
  --radius-700: 20px;
  --radius-full: 9999px;

  /* ── Spacing ───────────────────────────────────────────── */
  --space-0: 0;
  --space-100: 2px;
  --space-200: 4px;
  --space-300: 8px;
  --space-400: 12px;
  --space-500: 16px;
  --space-600: 24px;
  --space-700: 32px;
  --space-800: 40px;
  --space-900: 48px;
  --space-1000: 56px;
  --space-1100: 64px;
  --space-1200: 72px;
  --space-1300: 80px;
  --space-1400: 88px;
  --space-1500: 96px;
  --space-1600: 104px;
}