:root {
  /* Palette */
  --color-primary: #0e1726;
  --color-primary-800: #142235;
  --color-primary-700: #1c2e47;
  --color-ink: #0a0f1a;

  --color-accent: #ff6a00;
  --color-accent-600: #e85f00;
  --color-accent-300: #ff8a3d;
  --color-accent-tint: #fff1e8;

  --color-surface: #ffffff;
  --color-surface-alt: #f4f6f9;
  --color-border: #e2e7ee;
  --color-border-strong: #c7cfda;

  --color-text: #131c2b;
  --color-text-muted: #5a6679;
  --color-text-on-dark: #eef2f7;
  --color-text-on-dark-muted: #a7b2c2;

  --color-success: #1e8e5a;
  --color-success-bg: #e6f4ec;
  --color-error: #c8362b;
  --color-error-bg: #fcebe9;
  --color-focus-ring: #3d7dff;

  /* Typography */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --gutter: 20px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 15, 26, 0.06), 0 1px 3px rgba(10, 15, 26, 0.08);
  --shadow-md: 0 4px 10px rgba(10, 15, 26, 0.08), 0 8px 24px rgba(10, 15, 26, 0.08);
  --shadow-lg: 0 10px 24px rgba(10, 15, 26, 0.12), 0 18px 48px rgba(10, 15, 26, 0.14);
  --shadow-accent: 0 6px 18px rgba(255, 106, 0, 0.3);

  /* Sections */
  --section-y: var(--space-7);

  --header-h: 80px;
  --header-h-scrolled: 64px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 40px;
    --section-y: var(--space-9);
  }
}