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

/* Inter, self-hosted: the variable font (every weight, 100-900) in upright and
   italic, from assets/fonts/inter (SIL Open Font License; see LICENSE.txt
   there). Latin covers English; Latin Extended is fetched only for pages that
   use those characters. The family is named plain 'Inter' so the --gs-font
   tokens below pick it up unchanged. The upright Latin file is preloaded in
   inc/enqueue.php. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-ext-wght-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter/inter-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Brand colours */
  /* --gs-navy:     #1B2D6E; (previous brand navy) */
  --gs-navy:        #002c51;
  --gs-navy-dark:   #111e4a;
  --gs-navy-light:  #2a4080;
  --gs-orange:      #E87624;
  --gs-orange-dark: #cc6820;
  --gs-blue:        #00569e;
  --gs-blue-dark:   #003e75;
  /* Seven-stop sheen behind .gs-bg--blue. Factory values; a custom Primary
     Color replaces them (inc/brand-colors.php). */
  --gs-blue-sheen-1: #1B2D6E;
  --gs-blue-sheen-2: #1f3273;
  --gs-blue-sheen-3: #233a7d;
  --gs-blue-sheen-4: #2a468e;
  --gs-blue-sheen-5: #2e5099;
  --gs-blue-sheen-6: #2d5aa3;
  --gs-blue-sheen-7: #2c5fa8;
  /* Fixed brand colors. The picker-driven tokens above are overridden by the
     Primary / Secondary Color settings; these are never touched. They back
     the explicit "Blue" and "Orange" choices, so those keep meaning exactly
     that colour whatever the brand is set to. */
  --gs-blue-fixed:        #00569e;
  --gs-blue-dark-fixed:   #003e75;
  --gs-orange-fixed:      #E87624;
  --gs-orange-dark-fixed: #cc6820;
  --gs-blue-sheen-fixed-1: #1B2D6E;
  --gs-blue-sheen-fixed-2: #1f3273;
  --gs-blue-sheen-fixed-3: #233a7d;
  --gs-blue-sheen-fixed-4: #2a468e;
  --gs-blue-sheen-fixed-5: #2e5099;
  --gs-blue-sheen-fixed-6: #2d5aa3;
  --gs-blue-sheen-fixed-7: #2c5fa8;
  --gs-slate-gray:  #708090;
  --gs-slate-gray-text: #57616e; /* darker variant for text on light backgrounds (contrast) */

  /* Neutrals */
  --gs-white:       #ffffff;
  --gs-light:       #F2F2F2;
  --gs-gray-soft:   color-mix(in srgb, var(--gs-blue) 10%, transparent); /* tinted gray — blue at 10% */
  --gs-border:      #E2E8F0;
  --gs-text:        #374151;
  --gs-text-dark:   #18211F;
  --gs-muted:       #6B7280;

  /* Typography
     Inter is loaded from assets/fonts/inter (see the @font-face rules at the
     top of this file); the system sans-serif is only the fallback while it
     loads. */
  --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-header-h:    100px; /* fixed header height — .site-main clears exactly this */
  --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;
  }
}