/* GeoData design tokens. Custom properties only. */
:root {
  /* Brand palette (from the GeoData & AI Center logo) */
  --c-navy: #002e61;
  --c-deep: #0b1e36;
  --c-deep-2: #12294a;
  --c-teal: #008982;
  --c-teal-text: #006e68;
  --c-teal-light: #5cc7bf;
  --c-ochre: #c7a25c;
  --c-ochre-dark: #9c8250;
  --c-green: #3a9c3c;

  /* Neutrals */
  --c-stone: #f2f4f3;
  --c-stone-2: #e6eae9;
  --c-paper: #ffffff;
  --c-paper-ink: var(--c-accent-deep);
  --c-accent: #bfe3df;
  --c-accent-deep: #00635d;
  --c-white: #ffffff;
  --c-ink: #13243a;
  --c-muted: #4f5f70;
  --c-line: #d5dbde;
  --c-line-strong: #b4bfc4;
  --c-error: #b3261e;

  /* On dark surfaces */
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, 0.72);
  --c-on-dark-line: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-text: "Mulish", "Segoe UI", Arial, sans-serif;
  --font-display: "Mulish", "Segoe UI", Arial, sans-serif;
  --font-num: "IBM Plex Sans", "Arial Narrow", sans-serif;
  --num-stretch: 85%;
  --display-stretch: 100%;

  --fs-hero: 64px;   --lh-hero: 72px;
  --fs-h2: 48px;     --lh-h2: 56px;
  --fs-h3: 24px;     --lh-h3: 32px;
  --fs-num: 72px;    --lh-num: 72px;
  --fs-lead: 20px;   --lh-lead: 32px;
  --fs-body: 17px;   --lh-body: 28px;
  --fs-small: 15px;  --lh-small: 24px;
  --fs-caption: 13px; --lh-caption: 20px;

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

  /* Spacing (8px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 40px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 96px;

  --section-y: 96px;
  --container: 1280px;
  --gutter: 24px;
  --header-h: 88px;

  /* Geometry */
  --radius: 16px;
  --radius-sm: 12px;
  --stroke: 1px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.24s;

  /* Layers */
  --z-header: 100;
  --z-float: 90;
  --z-popup: 120;
  --z-overlay: 200;
}

@media (max-width: 1023px) {
  :root {
    --fs-hero: 48px;  --lh-hero: 56px;
    --fs-h2: 40px;    --lh-h2: 48px;
    --fs-num: 56px;   --lh-num: 64px;
    --section-y: 80px;
    --header-h: 72px;
  }
}

@media (max-width: 599px) {
  :root {
    --fs-hero: 36px;  --lh-hero: 44px;
    --fs-h2: 32px;    --lh-h2: 40px;
    --fs-h3: 21px;    --lh-h3: 28px;
    --fs-num: 48px;   --lh-num: 56px;
    --fs-lead: 18px;  --lh-lead: 28px;
    --fs-body: 16px;  --lh-body: 24px;
    --section-y: 64px;
    --gutter: 16px;
    --header-h: 64px;
  }
}