:root {
  --red-50: #fff1f2;
  --red-100: #ffdde0;
  --red-200: #ffbac0;
  --red-300: #fa8a94;
  --red-400: #f2515f;
  --red-500: #e30613;
  --red-600: #c20510;
  --red-700: #9b040d;
  --red-800: #70030a;
  --red-900: #4a0206;
  --ink-0: #fff;
  --ink-25: #fbfafa;
  --ink-50: #f6f5f5;
  --ink-100: #edecec;
  --ink-200: #dfdddd;
  --ink-300: #c6c3c3;
  --ink-400: #9c9898;
  --ink-500: #736f6f;
  --ink-600: #524e4e;
  --ink-700: #3a3737;
  --ink-800: #232121;
  --ink-900: #141313;
  --ink-1000: #000;
  --green-100: #dff3e7;
  --green-500: #1b7a4b;
  --green-700: #125334;
  --amber-100: #fbebd2;
  --amber-500: #b26a00;
  --amber-700: #7c4a00;
  --blue-100: #dceaf6;
  --blue-500: #0b63a5;
  --blue-700: #074a7c;

  --brand: var(--red-500);
  --brand-hover: var(--red-600);
  --brand-press: var(--red-700);
  --brand-soft: var(--red-50);
  --brand-soft-hover: var(--red-100);
  --brand-border: var(--red-200);
  --on-brand: var(--ink-0);
  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);
  --text-invert: var(--ink-0);
  --text-brand: var(--red-500);
  --text-link: var(--red-600);
  --text-link-hover: var(--red-700);
  --surface-page: var(--ink-0);
  --surface-subtle: var(--ink-25);
  --surface-card: var(--ink-0);
  --surface-sunken: var(--ink-50);
  --surface-inverse: var(--ink-900);
  --surface-brand: var(--red-500);
  --surface-brand-soft: var(--red-50);
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: rgb(255 255 255 / 16%);
  --focus-ring: var(--red-500);
  --focus-ring-offset: var(--ink-0);
  --success: var(--green-500);
  --success-soft: var(--green-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --info: var(--blue-500);
  --info-soft: var(--blue-100);
  --danger: var(--red-600);
  --danger-soft: var(--red-50);

  --font-display: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-3xs: 11px;
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 25px;
  --fs-3xl: 31px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;
  --fs-6xl: 60px;
  --fs-7xl: 76px;
  --lh-tight: 1.08;
  --lh-snug: 1.2;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --lh-loose: 1.7;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-display: -0.022em;
  --ls-heading: -0.014em;
  --ls-body: 0;
  --ls-label: 0.01em;
  --ls-caps: 0.08em;

  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --gutter-mobile: 20px;
  --gutter-desktop: 32px;
  --container-narrow: 720px;
  --container-text: 840px;
  --container-wide: 1200px;
  --container-full: 1440px;
  --section-y-mobile: var(--space-11);
  --section-y-desktop: var(--space-13);
  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
  --tap-min: 44px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --border-w-hair: 1px;
  --border-w-thick: 2px;
  --border-w-accent: 3px;

  --shadow-xs: 0 1px 2px rgb(20 19 19 / 6%);
  --shadow-sm: 0 1px 3px rgb(20 19 19 / 7%), 0 1px 2px rgb(20 19 19 / 4%);
  --shadow-md: 0 4px 12px rgb(20 19 19 / 8%), 0 1px 3px rgb(20 19 19 / 5%);
  --shadow-lg: 0 12px 28px rgb(20 19 19 / 10%), 0 2px 6px rgb(20 19 19 / 5%);
  --shadow-xl: 0 24px 56px rgb(20 19 19 / 14%);
  --shadow-brand: 0 8px 20px rgb(227 6 19 / 22%);
  --ring-focus: 0 0 0 3px rgb(227 6 19 / 28%);
  --ring-focus-invert: 0 0 0 3px rgb(255 255 255 / 45%);
  --scrim: rgb(20 19 19 / 48%);
  --blur-glass: saturate(1.4) blur(14px);
  --glass-light: rgb(255 255 255 / 78%);
  --glass-dark: rgb(20 19 19 / 62%);

  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-page: 420ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0.6, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 1, 0.5);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --press-scale: 0.98;
  --hover-lift: -1px;
  --transition-control: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
    --press-scale: 1;
    --hover-lift: 0;
  }
}