/* ============================================================
   Genstone Design Tokens
   All module stylesheets reference these vars — never redefine.
   ============================================================ */

:root {
  /* Brand colours */
  --gs-navy:        #1B2D6E;
  --gs-navy-dark:   #111e4a;
  --gs-navy-light:  #2a4080;
  --gs-orange:      #E87624;
  --gs-orange-dark: #cc6820;
  --gs-blue:        #00569e;
  --gs-blue-dark:   #003e75;
  --gs-slate-gray:  #708090;

  /* Neutrals */
  --gs-white:       #ffffff;
  --gs-light:       #F2F2F2;
  --gs-gray-soft:   rgba(0, 86, 158, 0.1); /* tinted gray — blue at 10% */
  --gs-border:      #E2E8F0;
  --gs-text:        #374151;
  --gs-text-dark:   #18211F;
  --gs-muted:       #6B7280;

  /* Typography
     Note: 'Inter' is declared but not loaded — mirrors the source site's
     declaration, which falls back to the system sans-serif (SF Pro on
     macOS/iOS, Segoe UI on Windows, Roboto on Android). */
  --gs-font:         'Inter', sans-serif;
  --gs-font-display: 'Inter', sans-serif;

  /* Heading scale (clamp: mobile → desktop) */
  --gs-h1: clamp(2.063rem, 3vw + 2rem, 5rem);         /* 33px → 80px */
  --gs-h2: clamp(1.75rem, 2vw + 1rem, 2.75rem);       /* 28px → 44px */
  --gs-h3: clamp(1.375rem, 1.25vw + 0.875rem, 2rem);  /* 22px → 32px */
  --gs-h4: clamp(1.125rem, 0.75vw + 0.75rem, 1.5rem); /* 18px → 24px */

  /* Body copy size (clamp: mobile → desktop) */
  --gs-body-size: clamp(1rem, 0.5vw + 0.85rem, 1.25rem); /* 16px → 20px */

  /* Hero text shadow (matches Genstone source site) */
  --gs-text-shadow-hero: 0 0 10px rgba(0, 0, 0, 0.3);

  /* Shape */
  --gs-radius:      10px;
  --gs-radius-sm:   6px;
  --gs-radius-lg:   16px;

  /* Shadows */
  --gs-shadow-sm:   0 1px 3px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.06);
  --gs-shadow:      0 4px 12px rgba(0,0,0,.07), 0 16px 40px rgba(0,0,0,.07);

  /* Layout */
  --gs-container:   1680px;
  --gs-gap:         24px;

  /* Section padding steps (responsive — overridden at breakpoints below) */
  --gs-pad-none: 0;
  --gs-pad-sm:   40px;
  --gs-pad-md:   64px;
  --gs-pad-lg:   96px;
}

/* Tablet / smaller laptops */
@media (max-width: 960px) {
  :root {
    --gs-pad-sm: 32px;
    --gs-pad-md: 48px;
    --gs-pad-lg: 72px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --gs-pad-sm: 24px;
    --gs-pad-md: 36px;
    --gs-pad-lg: 48px;
  }
}