:root {
  /* ===== Neutral scale — interpolated #FFFFFF → #0F1B2D (10 steps) ===== */
  --neutral-0:   #FFFFFF;
  --neutral-100: #E4E6E8;
  --neutral-200: #CACCD0;
  --neutral-300: #AFB3B9;
  --neutral-400: #949AA2;
  --neutral-500: #7A808A;
  --neutral-600: #5F6773;
  --neutral-700: #444E5C;
  --neutral-800: #2A3444;
  --neutral-900: #0F1B2D;

  /* ===== Brand ===== */
  --primary: #E8262D;
  --primary-hover: #C81F26;

  /* ===== Exact design grays (from Figma variables) ===== */
  --gray-dark: #676767;    /* body text gray */
  --light-gray: #F3F3F3;   /* logo boxes / soft surfaces */
  --gray: #E5E6EA;         /* borders / dividers */
  --dark: #0F1B2D;         /* dark sections base */
  --trust-bg: var(--neutral-900);     /* enterprise-trust dark burgundy */

  /* ===== Semantic (light theme) ===== */
  --bg: var(--neutral-0);
  --surface: var(--light-gray);
  --fg: var(--neutral-900);
  --fg-muted: var(--gray-dark);
  --border: var(--gray);

  /* ===== Motion ===== */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Type families ===== */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif; /* headline + body */
  --font-mono: 'Inter', system-ui, -apple-system, sans-serif;    /* button + tagline (Inter, uppercase) */
  --font-code: ui-monospace, 'Cascadia Code', 'SFMono-Regular', monospace; /* code blocks only */

  /* ===== Grid spec (design baseline @1920px) ===== */
  --grid-columns: 12;
  --grid-margin: 4rem;   /* 40px @1920 */
  --grid-gutter: 4rem;   /* 40px @1920 */
}