/* ============================================================
   Northumberland Humane Society — design tokens  v1.1
   Green primary · Forest secondary · Teal + Orange accent
   Base 16px = 1rem. All sizing on a 4px grid.
   Requires: <link rel="stylesheet" href="https://use.typekit.net/nbm2jes.css">
   ============================================================ */

:root {
  /* ---------- Brand ramps (OKLCH-derived, hue-true) ---------- */
  /* green */
  --nhs-green-50: #EBFFDA;
  --nhs-green-100: #E1F8CA;
  --nhs-green-200: #CBECAB;
  --nhs-green-300: #B6E08A;
  --nhs-green-400: #A1D368;
  --nhs-green-500: #8CC63F;
  --nhs-green-600: #669B00;
  --nhs-green-700: #497000;
  --nhs-green-800: #2D4800;
  --nhs-green-900: #142300;
  /* forest */
  --nhs-forest-50: #ECFBF1;
  --nhs-forest-100: #D0E3D7;
  --nhs-forest-200: #9BB4A3;
  --nhs-forest-300: #678773;
  --nhs-forest-400: #365C45;
  --nhs-forest-500: #00341C;
  --nhs-forest-600: #00301A;
  --nhs-forest-700: #002D17;
  --nhs-forest-800: #002915;
  --nhs-forest-900: #002613;
  /* teal */
  --nhs-teal-50: #DFFEFC;
  --nhs-teal-100: #CCF3F0;
  --nhs-teal-200: #A5DEDA;
  --nhs-teal-300: #7DC8C3;
  --nhs-teal-400: #51B2AD;
  --nhs-teal-500: #009D98;
  --nhs-teal-600: #007C78;
  --nhs-teal-700: #005D5A;
  --nhs-teal-800: #003F3D;
  --nhs-teal-900: #002423;
  /* orange */
  --nhs-orange-50: #FFF4F1;
  --nhs-orange-100: #FFE7DF;
  --nhs-orange-200: #FFCBBA;
  --nhs-orange-300: #FFAD94;
  --nhs-orange-400: #FF8D69;
  --nhs-orange-500: #FF6633;
  --nhs-orange-600: #D34200;
  --nhs-orange-700: #9C2E00;
  --nhs-orange-800: #691C00;
  --nhs-orange-900: #3A0C00;

  /* ---------- Neutrals ---------- */
  --nhs-white: #FFFFFF;
  --nhs-tint:  #F0FEDD;

  /* ---------- Surfaces ---------- */
  --bg-page: var(--nhs-white);
  --bg-subtle: var(--nhs-tint);
  --bg-inverse: var(--nhs-forest-500);
  --bg-primary-subtle: var(--nhs-green-50);
  --bg-accent-teal-subtle: var(--nhs-teal-50);
  --bg-accent-orange-subtle: var(--nhs-orange-50);

  /* ---------- Text ---------- */
  --text-default: var(--nhs-forest-500);  /* 13.93 on white */
  --text-inverse: var(--nhs-white);  /* 13.93 on forest */
  --text-on-primary: var(--nhs-forest-500);  /* 6.81 on green-500 */
  --text-on-accent-orange: var(--nhs-forest-500);  /* 4.77 on orange-500 */
  --text-primary-on-light: var(--nhs-green-700);  /* 5.83 on white */
  --text-accent-teal-on-light: var(--nhs-teal-600);  /* 5.06 on white */
  --text-accent-orange-on-light: var(--nhs-orange-600);  /* 4.62 on white */
  --text-muted: var(--nhs-forest-400);  /* 7.57 on white */

  /* ---------- Borders (3:1 minimum vs white) ---------- */
  --border-default: var(--nhs-forest-300);  /* 3.97 */
  --border-strong: var(--nhs-forest-400);  /* 7.57 */
  --border-primary: var(--nhs-green-600);  /* 3.36 */
  --border-accent-teal: var(--nhs-teal-500);  /* 3.35 */
  --border-accent-orange: var(--nhs-orange-600);  /* 4.62 */

  /* ---------- Focus ---------- */
  --focus-ring: var(--nhs-forest-500);  /* on light surfaces */
  --focus-ring-inverse: var(--nhs-green-300);  /* 9.30 on forest */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---------- Links ---------- */
  --text-link: var(--nhs-forest-500);
  --text-link-hover: var(--nhs-green-700);
  --link-underline-offset: 4px;

  /* ---------- Feedback states (distinct from brand-orange) ---------- */
  --state-success: var(--nhs-green-700);  /* 5.83 on white */
  --state-warning: #8A5300;  /* amber-dark, 6.33 on white — not brand orange */
  --state-error:   #B3001B;  /* crimson, 7.16 on white — never reads as brand */
  /* Hover is derived, not a new hex — no third non-brand hue enters the system. */
  --state-error-hover: color-mix(in oklch, #B3001B 85%, black);
  --state-info:    var(--nhs-teal-600);  /* 5.06 on white */

  /* ---------- Primary button — green surface, forest label ---------- */
  --btn-primary-bg: var(--nhs-green-500);  /* label 6.81 */
  --btn-primary-bg-hover: var(--nhs-green-400);  /* label 7.98 - LIGHTENS */
  --btn-primary-bg-active: var(--nhs-green-300);  /* label 9.30 */
  --btn-primary-label: var(--nhs-forest-500);

  /* ---------- Secondary button — forest surface, white label ---------- */
  --btn-secondary-bg: var(--nhs-forest-500);  /* label 13.93 */
  --btn-secondary-bg-hover: var(--nhs-forest-400);  /* label 7.57 - LIGHTENS */
  --btn-secondary-bg-active: var(--nhs-forest-500);
  --btn-secondary-label: var(--nhs-white);

  /* ---------- Teal accent button — white label ---------- */
  --btn-teal-bg: var(--nhs-teal-600);  /* label 5.06 */
  --btn-teal-bg-hover: var(--nhs-teal-700);  /* label 7.74 */
  --btn-teal-bg-active: var(--nhs-teal-800);  /* label 11.81 */
  --btn-teal-label: var(--nhs-white);

  /* ---------- Orange accent button — forest label ---------- */
  --btn-orange-bg: var(--nhs-orange-500);  /* label 4.77 */
  --btn-orange-bg-hover: var(--nhs-orange-400);  /* label 6.14 - LIGHTENS */
  --btn-orange-bg-active: var(--nhs-orange-300);  /* label 7.73 */
  --btn-orange-label: var(--nhs-forest-500);

  /* ---------- Disabled (assumption — pending sign-off) ---------- */
  --btn-disabled-bg: var(--nhs-forest-100);
  --btn-disabled-label: var(--nhs-forest-300);

  /* ---------- Typography ----------
     Family name is "omnes-pro" — NOT "Omnes".
     Kit ships 500/600/700/800 only. There is no weight 400.
     Never set font-weight: normal or 400. */

  --font-sans: "omnes-pro", "Poppins", "Century Gothic",
               ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* ---------- Type scale — FLUID, 6 August 2026 ----------
     Base 16px = 1rem.

     Type interpolates with the viewport between the approved 375px and
     1440px values. Both endpoints are the signed-off numbers, unchanged —
     clamp() only fills the gap that stepped values left. Below 375 and above
     1440 the value pins, so the scale never runs away.

     The 4px grid now governs VERTICAL RHYTHM — spacing, band padding, stack
     gaps, button and field heights — all of which stay fixed below. Font
     sizes and their line-heights interpolate together, so their ratio holds
     and no line-height ever collapses under its own font size (which is what
     a fluid size against a stepped line-height would do at 767px).

     Styles whose 375 and 1440 values are identical carry no clamp — there is
     nothing to interpolate, and a clamp with equal bounds is a no-op that
     only obscures the value. Those are listed as plain rem below.

     Supersedes the "no clamp(), no fractional sizes" rule in the original
     brief. Changed on the designer's direction, 6 Aug 2026. */

  /* Fluid — 375px value → 1440px value */
  --fs-display-xl: clamp(3rem, 2.2077rem + 3.3803vw, 5.25rem);      /* 48 → 84 */
  --lh-display-xl: clamp(3.5rem, 2.7958rem + 3.0047vw, 5.5rem);     /* 56 → 88 */
  --fs-display-lg: clamp(2.5rem, 1.8838rem + 2.6291vw, 4.25rem);    /* 40 → 68 */
  --lh-display-lg: clamp(3rem, 2.3838rem + 2.6291vw, 4.75rem);      /* 48 → 76 */
  --fs-h1:         clamp(2.25rem, 1.8099rem + 1.8779vw, 3.5rem);    /* 36 → 56 */
  --lh-h1:         clamp(2.75rem, 2.3099rem + 1.8779vw, 4rem);      /* 44 → 64 */
  --fs-h2:         clamp(2rem, 1.7359rem + 1.1268vw, 2.75rem);      /* 32 → 44 */
  --lh-h2:         clamp(2.5rem, 2.2359rem + 1.1268vw, 3.25rem);    /* 40 → 52 */
  --fs-h3:         clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);   /* 28 → 36 */
  --lh-h3:         clamp(2.25rem, 2.0739rem + 0.7512vw, 2.75rem);   /* 36 → 44 */
  --fs-h4:         clamp(1.5rem, 1.412rem + 0.3756vw, 1.75rem);     /* 24 → 28 */
  --lh-h4:         clamp(2rem, 1.912rem + 0.3756vw, 2.25rem);       /* 32 → 36 */
  --fs-h5:         clamp(1.25rem, 1.162rem + 0.3756vw, 1.5rem);     /* 20 → 24 */
  --lh-h5:         clamp(1.75rem, 1.662rem + 0.3756vw, 2rem);       /* 28 → 32 */
  --fs-stat-figure: clamp(2.75rem, 2.3099rem + 1.8779vw, 4rem);     /* 44 → 64 */
  --lh-stat-figure: clamp(2.75rem, 2.3099rem + 1.8779vw, 4rem);     /* 44 → 64 */

  /* Constant — same value at 375 and at 1440, so no interpolation exists */
  --fs-h6:          1.25rem;  --lh-h6:          1.75rem;  /* 20 / 28 */
  --fs-body-lg:     1.25rem;  --lh-body-lg:     2rem;     /* 20 / 32 */
  --fs-body-md:     1rem;     --lh-body-md:     1.5rem;   /* 16 / 24 */
  --fs-body-sm:     0.75rem;  --lh-body-sm:     1.25rem;  /* 12 / 20 */
  --fs-caption:     0.75rem;  --lh-caption:     1rem;     /* 12 / 16 */
  --fs-overline:    0.75rem;  --lh-overline:    1rem;     /* 12 / 16 */
  --fs-button-lg:   1.25rem;  --lh-button-lg:   1.5rem;   /* 20 / 24 */
  --fs-button-md:   1rem;     --lh-button-md:   1.5rem;   /* 16 / 24 */
  --fs-button-sm:   1rem;     --lh-button-sm:   1.25rem;  /* 16 / 20 */
  --fs-stat-label:  1rem;     --lh-stat-label:  1.25rem;  /* 16 / 20 */

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:     0;
  --ls-overline: 0.06em;

  --measure-max: 72ch;

  /* ---------- Spacing — 4px grid ---------- */
  --space-1:  0.25rem;  /*   4px */
  --space-2:  0.5rem;   /*   8px */
  --space-3:  0.75rem;  /*  12px */
  --space-4:  1rem;     /*  16px */
  --space-5:  1.25rem;  /*  20px */
  --space-6:  1.5rem;   /*  24px */
  --space-7:  2rem;     /*  32px */
  --space-8:  2.5rem;   /*  40px */
  --space-9:  3rem;     /*  48px */
  --space-10: 4rem;     /*  64px */
  --space-11: 5rem;     /*  80px */
  --space-12: 6rem;     /*  96px */
  --space-13: 7.5rem;   /* 120px */
  --space-14: 10rem;    /* 160px */

  /* ---------- Button geometry (set 03 Aug 2026) ---------- */
  --btn-h-sm: 2rem;    /* 32px */
  --btn-h-md: 2.25rem; /* 36px — standard */
  --btn-h-lg: 3rem;    /* 48px */
  --btn-px-sm: 1rem;      /* 16px */
  --btn-px-md: 1.25rem;   /* 20px */
  --btn-px-lg: 2rem;      /* 32px */
  --btn-py: 0;            /* height token owns vertical size */
  --btn-gap-min: 0.5rem;  /*  8px minimum between adjacent buttons */

  /* ---------- Radius ---------- */
  --radius-sm:   0.5rem;   /*  8px */
  --radius-md:   0.75rem;  /* 12px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-full: 999px;

  /* ---------- Scrim over photography ----------
     72% is the floor that holds white 16px body copy at 4.5:1 over the
     worst-case bright patch of a daylight photo. Shared by hero, campaign
     feature and image panel. */
  --scrim-forest: rgb(from var(--nhs-forest-500) r g b / 0.72);

  /* ---------- Elevation — flat by default ---------- */
  --shadow-none: none;
  --shadow-card: 0 2px 8px rgba(0, 52, 28, 0.10);
  --shadow-overlay: 0 12px 32px rgba(0, 52, 28, 0.20);

  /* ---------- Layout ---------- */
  --content-max: 75rem;    /* 1200px */
  --gutter:      1.5rem;   /*  24px */
  --margin-outer:7.5rem;   /* 120px — desktop; 48px at ≤1023, 24px at ≤767 */

  /* ---------- Motion ---------- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Metric-matched fallback so the Typekit swap does not shift layout */
@font-face {
  font-family: "omnes-fallback";
  src: local("Poppins"), local("Century Gothic"), local("Segoe UI");
  size-adjust: 103%;
  ascent-override: 90%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* Type is fluid and needs no mobile step — the clamps above reach their 375px
   values on their own. This block now carries only the outer margin, which
   stays STEPPED: it is spacing, and spacing holds the 4px grid.
   (--section-rhythm was declared here and referenced nowhere; removed.) */
@media (max-width: 767px) {
  :root { --margin-outer: 1.5rem; }  /* 24px */
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root { --margin-outer: 3rem; }  /* 48px — the step that lets a 2-up card grid fit at 768 */
}

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

/* Required: button height tokens are exact heights, so borders and padding
   must not add to them. */
*, *::before, *::after { box-sizing: border-box; }

/* The UA default is body { margin: 8px }. Without this reset every
   full-bleed band — utility bar, nav, tint bands, footer — floats inside an
   8px white frame and nothing reaches the viewport edge. Added 6 Aug 2026. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-default);
  background: var(--bg-page);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}