:root {
  /* ===== Brand palette ===== */
  --color-primary: #ef7e3c;
  --color-primary-hover: #d96828;
  --color-primary-soft: #fde7d6;
  --color-primary-glow: rgba(239, 126, 60, 0.35);
  --color-secondary: #163593;
  --color-secondary-hover: #102873;
  --color-secondary-soft: #e4eaff;
  --color-accent: #2a3c46;
  --color-accent-soft: #eef2f4;

  /* ===== Surfaces & text ===== */
  --color-text: #2a3c46;
  --color-text-muted: #6b7c85;
  --color-text-soft: #97a3aa;
  --color-bg: #ffffff;
  --color-bg-alt: #f7f9fb;
  --color-bg-mute: #eef2f4;
  --color-bg-dark: #163593;
  --color-bg-darker: #142a52;
  --color-border: #e6e9ec;
  --color-border-soft: #f0f2f4;
  --color-link: #2a3c46;
  --color-link-hover: #ef7e3c;
  --color-white: #ffffff;
  --color-black: #1a1a1a;
  --color-overlay-dark: rgba(20, 42, 82, 0.55);

  /* ===== Gradients ===== */
  --gradient-primary: linear-gradient(135deg, #f49558 0%, #ef7e3c 50%, #e26221 100%);
  --gradient-secondary: linear-gradient(135deg, #1f4ab5 0%, #163593 60%, #102873 100%);
  --gradient-hero: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 60%, #ffffff 100%);
  --gradient-text-number: linear-gradient(135deg, #f49558, #ef7e3c 60%, #c95212);

  /* ===== Typography ===== */
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: clamp(12px, 0.78vw + 10px, 13px);
  --fs-sm: clamp(13px, 0.85vw + 11px, 14px);
  --fs-base: clamp(15px, 0.6vw + 13px, 17px);
  --fs-md: clamp(16px, 0.7vw + 14px, 18px);
  --fs-lead: clamp(17px, 0.9vw + 14px, 20px);
  --fs-h4: clamp(17px, 0.9vw + 14px, 19px);
  --fs-h3: clamp(20px, 1.1vw + 16px, 24px);
  --fs-h2: clamp(26px, 2vw + 18px, 38px);
  --fs-h1: clamp(32px, 2.6vw + 20px, 48px);
  --fs-hero: clamp(36px, 3.4vw + 22px, 56px);
  --fs-stat: clamp(34px, 2.6vw + 22px, 48px);

  --lh-base: 1.65;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-loose: 1.8;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ===== Spacing scale ===== */
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 80px;
  --sp-2xl: 120px;
  --sp-xxl: 120px;

  /* ===== Layout ===== */
  --container-max: 1170px;
  --container-padding: clamp(16px, 4vw, 32px);

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

  /* ===== Elevation ===== */
  --shadow-1: 0 1px 2px rgba(20, 42, 82, 0.04), 0 1px 3px rgba(20, 42, 82, 0.05);
  --shadow-2: 0 4px 10px rgba(20, 42, 82, 0.06), 0 2px 4px rgba(20, 42, 82, 0.05);
  --shadow-3: 0 14px 30px rgba(20, 42, 82, 0.08), 0 4px 10px rgba(20, 42, 82, 0.05);
  --shadow-4: 0 22px 60px rgba(20, 42, 82, 0.14), 0 8px 18px rgba(20, 42, 82, 0.08);
  --shadow-glow: 0 12px 30px rgba(239, 126, 60, 0.25);
  --shadow-card: var(--shadow-2);
  --shadow-card-hover: var(--shadow-3);
  --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
  --dur-deliberate: 600ms;

  /* ===== Breakpoints (informational, used in media queries below) ===== */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* ===== Z-index scale ===== */
  --z-base: 1;
  --z-navbar: 100;
  --z-dropdown: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-deliberate: 0ms;
  }
}