:root {
  /* === Colors === */
  /* Surface */
  --color-bg: #ffffff;
  --color-surface: #f7f7f8;
  --color-surface-2: #f0f0f2;

  /* Text */
  --color-text: #0f1115;
  --color-text-muted: #5b606b;
  --color-text-subtle: #8a8f9b;

  /* Border */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* Brand */
  --color-primary: #2b6cee;
  --color-primary-hover: #1f55c7;
  --color-primary-soft: #eef3fe;

  /* Semantic */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  /* Dark (CTA banner / "with" comparison panel) */
  --color-dark: #0a0a0c;
  --color-dark-2: #1a1a1f;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #a1a1aa;

  /* === Typography === */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (mobile -> desktop) */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12 -> 13 */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);   /* 14 -> 15 */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);       /* 15 -> 16 */
  --fs-lg: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);         /* 16 -> 18 */
  --fs-xl: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);      /* 18 -> 20 */
  --fs-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);       /* 20 -> 24 */
  --fs-3xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24 -> 32 */
  --fs-4xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);       /* 30 -> 40 */
  --fs-5xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.25rem);       /* 36 -> 52 */
  --fs-6xl: clamp(2.75rem, 2rem + 3.5vw, 4rem);            /* 44 -> 64 */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Spacing (4px scale) === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === Layout === */
  --container-max: 1280px;
  --container-px: clamp(1rem, 4vw, 2rem);
  --section-py: clamp(3.5rem, 7vw, 6rem);

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 17, 21, 0.06), 0 2px 4px rgba(15, 17, 21, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 17, 21, 0.08), 0 4px 8px rgba(15, 17, 21, 0.04);

  /* === Transitions === */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}