:root {
  --color-bg: #ffffff;
  --color-text: #121212;
  --color-muted: #626262;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-surface: #f6f6f4;
  --color-accent: #7db3ff;
  --color-navy-950: #07111f;
  --color-navy-900: #0b1a2e;
  --color-paper: #f7f4ee;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --container: 82rem;

  /* Sitewide system (sc) — navy / blue / mist */
  --sc-navy-950: var(--color-navy-950);
  --sc-navy-900: var(--color-navy-900);
  --sc-navy-800: #12253f;
  --sc-navy-700: #1a3356;
  --sc-navy-100: #d7e2f2;
  --sc-navy-50: #eef3fa;

  --sc-blue-700: #084dcc;
  --sc-blue-600: #0b62ff;
  --sc-blue-500: #3b82ff;
  --sc-blue-100: #dbe8ff;
  --sc-blue-50: #eef4ff;

  --sc-mist-0: #ffffff;
  --sc-mist-50: #f5f8fc;
  --sc-mist-100: #e8eef7;
  --sc-border-light: #c9d5e6;
  --sc-border-subtle: rgba(7, 17, 31, 0.08);
  --sc-border-on-dark: rgba(255, 255, 255, 0.12);

  --sc-text-primary: var(--color-text);
  --sc-text-secondary: #4a5567;
  --sc-text-muted: var(--color-muted);
  --sc-text-on-dark: #f5f8fc;
  --sc-text-on-dark-muted: rgba(245, 248, 252, 0.72);
  --sc-link: var(--sc-blue-600);
  --sc-link-on-dark: #8fb4ff;

  /* Status tones are used as badge text on their own tinted fills, so both have
     to clear AA against the paired -bg value, not against white. */
  --sc-success: #1b7943;
  --sc-success-bg: #e8f7ef;
  --sc-warning: #a15804;
  --sc-warning-bg: #fff3e6;
  --sc-danger: #c0362c;
  --sc-danger-bg: #fdeceb;

  --sc-cat-vpn: #0b62ff;
  --sc-cat-vpn-bg: #e8f0fe;
  --sc-cat-privacy: #1f8a4c;
  --sc-cat-privacy-bg: #e8f7ef;
  --sc-cat-identity: #5b4fd6;
  --sc-cat-identity-bg: #eeeaff;
  --sc-cat-antivirus: #d97706;
  --sc-cat-antivirus-bg: #fff3e6;
  --sc-cat-business: #0891b2;
  --sc-cat-business-bg: #e0f7fb;

  --sc-space-1: var(--space-1);
  --sc-space-2: var(--space-2);
  --sc-space-3: var(--space-3);
  --sc-space-4: var(--space-4);
  --sc-space-5: 1.25rem;
  --sc-space-6: var(--space-6);
  --sc-space-8: var(--space-8);
  --sc-space-10: 2.5rem;
  --sc-space-12: var(--space-12);
  --sc-space-16: var(--space-16);
  --sc-space-20: 5rem;
  --sc-space-24: 6rem;

  --sc-gutter: clamp(1.25rem, 3vw, 1.75rem);
  --sc-section-y: clamp(3rem, 4vw, 5rem);
  --sc-module-gap: var(--sc-space-8);
  --sc-stack-title-gap: var(--sc-space-3);
  --sc-stack-body-gap: var(--sc-space-6);
  --sc-grid-gap: clamp(1rem, 2vw, 1.5rem);

  --sc-width-reading: 720px;
  --sc-width-content: 1020px;
  --sc-width-full: 1200px;

  --sc-radius-sm: 8px;
  --sc-radius-md: 12px;
  --sc-radius-lg: 16px;

  --sc-shadow-sm: 0 1px 2px rgba(7, 17, 31, 0.06);
  --sc-shadow-md: 0 4px 12px rgba(7, 17, 31, 0.08);
  --sc-shadow-lg: 0 8px 30px rgba(15, 35, 70, 0.08);
  --sc-shadow-soft: var(--sc-shadow-lg);

  --sc-focus-ring: 0 0 0 3px rgba(11, 98, 255, 0.35);

  /* Sitewide typography (pack 02_DESIGN_SYSTEM/typography.md) */
  --sc-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-font-serif: "Source Serif 4", "Source Serif", Georgia, "Times New Roman", serif;
  --sc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sc-fw-regular: 400;
  --sc-fw-medium: 500;
  --sc-fw-semibold: 600;
  --sc-fw-bold: 700;
  --sc-fw-extrabold: 800;

  --sc-fs-xs: 0.75rem;
  --sc-fs-sm: 0.875rem;
  --sc-fs-md: 1rem;
  --sc-fs-lg: 1.125rem;
  --sc-fs-xl: 1.25rem;
  --sc-fs-2xl: 1.5rem;
  --sc-fs-3xl: 1.875rem;
  --sc-fs-4xl: 2.25rem;
  --sc-fs-5xl: 2.75rem;

  --sc-lh-tight: 1.15;
  --sc-lh-snug: 1.25;
  --sc-lh-heading: 1.3;
  --sc-lh-ui: 1.4;
  --sc-lh-body: 1.6;
}