:root {
  /* ---- Brand colours ---- */
  --color-midnight: #101828;   /* primary text, dark sections, nav, footer */
  --color-signal-lime: #B7F34A;/* key CTA, final action node, active signals (~5% max) */
  --color-digital-teal: #1FB7A6;/* links, journey paths, interface accents */

  /* ---- Neutrals ---- */
  --color-cloud: #F7F9FC;      /* main background */
  --color-white: #FFFFFF;      /* cards, content backgrounds */
  --color-slate: #475467;      /* body text */
  --color-deep-slate: #344054; /* secondary headings, interface text */
  --color-mist: #E4E7EC;       /* borders, dividers */

  /* ---- Text on dark backgrounds ---- */
  --color-text-on-dark: #FFFFFF;           /* primary text on Midnight/dark sections */
  --color-text-on-dark-secondary: #98A2B3; /* secondary/supporting text on dark */

  /* ---- Functional (sparingly) ---- */
  --color-amber: #F6B94A;      /* opportunity / warning */
  --color-coral: #F97066;      /* error / attention */
  --color-sky:   #53B1FD;      /* information / data */

  /* ---- Typography ---- */
  --font-heading: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --weight-hero: 800;
  --weight-heading: 700;
  --weight-card: 600;
  --weight-label: 500;
  --weight-body: 400;

  /* ---- Type scale (desktop) ---- */
  --fs-display-xl: 72px;  --lh-display-xl: 1.02;
  --fs-display: 56px;     --lh-display: 1.06;
  --fs-h1: 48px;          --lh-h1: 1.1;
  --fs-h2: 36px;          --lh-h2: 1.15;
  --fs-h3: 24px;          --lh-h3: 1.25;
  --fs-body-lg: 18px;     --lh-body: 1.6;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;

  /* ---- Spacing ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px; --space-32: 128px;

  /* ---- Radius ---- */
  --radius-small: 8px; --radius-medium: 12px; --radius-card: 18px;
  --radius-panel: 24px; --radius-round: 999px;

  /* ---- Motion ---- */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Primary CTA — Signal Lime, Midnight text (never white text on lime) */
.btn-action { background: var(--color-signal-lime); color: var(--color-midnight); }
/* Primary — Midnight */
.btn-primary { background: var(--color-midnight); color: var(--color-white); }
/* Secondary — outline */
.btn-secondary { background: transparent; color: var(--color-midnight); border: 1.5px solid var(--color-mist); }
/* Focus ring — Digital Teal */
:focus-visible { outline: 2px solid var(--color-digital-teal); outline-offset: 2px; }