/* ==========================================================================
   Judy for BHUSD 2026 — design tokens
   Values measured from HomePage.png / Vision.png with img2vibe/measure.py.
   Typefaces identified with img2vibe/fontmatch.py; see QUESTIONS.md for the
   evidence and the one-line swap if the client's brand faces differ.
   ========================================================================== */

/* ---- Webfonts, self-hosted latin subsets ---------------------------------
   Anton is single-weight; Oswald and Figtree are variable, one file each. */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/Anton-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-var.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette --------------------------------------------------------
     The campaign brand sheet (palette.jpg, supplied 2026-08-04) is the
     source of truth; it supersedes the values sampled from the comps,
     which were an approximation of it. Six brand swatches:

       #006666 Primary Teal    #004D4D Dark Teal
       #FD5E0F Accent Orange   #FE874C Light Orange
       #F4F7F8 Light Gray      #FFFFFF White

     Every token below is either one of those six or is marked as having
     no brand equivalent. Each mapping decision, and the alternate that
     was not taken, is written up in ../../JUDY.md §3. */

  /* Brand swatches, verbatim. */
  --teal-primary: #006666;   /* Primary Teal  — buttons, hero gradient pool */
  --teal-dark:    #004D4D;   /* Dark Teal     — hero base, CTA band, footer, headings */
  --orange:       #FD5E0F;   /* Accent Orange — DONATE, "KEPT", figures, rules */
  --orange-light: #FE874C;   /* Light Orange  — hero bokeh */
  --grey:         #F4F7F8;   /* Light Gray    — tinted bands and card fill */
  --white:        #FFFFFF;

  /* Semantic aliases onto the swatches above. Kept as separate names so a
     single band or component can be re-pointed without touching the rest. */
  --teal-band:    var(--teal-dark);     /* Vision hero band — collapsed into Dark Teal */
  --teal-button:  var(--teal-primary);  /* VOLUNTEER, FOLLOW ON INSTAGRAM */
  --surface:      var(--grey);          /* Experience section */
  --surface-alt:  var(--grey);          /* Vision mission section */
  --card:         var(--grey);          /* stat and feature card fill */
  --page:         var(--white);         /* the sections the comps drew off-white */

  /* Derived from a brand swatch — not on the sheet, but traceable to it. */
  --orange-ink:   #C24406;   /* Accent Orange darkened for small text: 5.1:1 on
                                white, 4.7:1 on the card fill. Brand orange sets
                                2.9:1 there and fails AA at body size. Used only
                                where orange is read as text; anything seen as
                                colour keeps --orange exactly. */
  --teal-light:   #3FC9C9;   /* footer column headings, Vision eyebrow. The sheet
                                has no light teal; this is the comp's #3FC7CF with
                                its blue cast removed so it sits in the brand's
                                hue family (G=B, as both brand teals are). Same
                                lightness, 4.8:1 on Dark Teal. */

  /* Third-party brand colours. Not the campaign's palette and deliberately
     not aliased onto it: these belong to Instagram and Facebook and are only
     ever used on the two social buttons in the Follow Judy card, where the
     point is that they read as those platforms' own colours. Added
     2026-08-16 on the client's instruction. */
  --ig-orange:    #F56040;   /* the warm stop of the official Instagram gradient,
                                the same one the .ig-mark glyph sits on */
  --fb-blue:      #1877F2;   /* Facebook brand blue */

  /* No brand equivalent — comp-measured neutrals, retained as drawn. */
  --card-border:  #E8EBED;
  --ink:          #14242C;   /* body copy */
  --ink-soft:     #33454C;
  --disc:         #DFEAE9;   /* Vision icon disc */
  --rule:         #DDE2E2;

  /* ---- Type families --------------------------------------------------
     Change these two lines to reface the whole site. No family name
     appears anywhere else in the CSS. */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-label:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Figtree', 'Segoe UI', system-ui, sans-serif;

  /* ---- Type scale -----------------------------------------------------
     Sizes are in rem against a root that tracks the viewport, so the page
     reproduces the comp exactly at 1024px and scales in proportion above
     it. Comp pixels / 16 = rem. */
  --fs-hero:       3rem;       /* 48px — PROMISES MADE. */
  --fs-hero-alt:   3.75rem;    /* 60px — THE WORK ISN'T FINISHED. */
  --fs-h2:         1.6875rem;  /* 27px — ABOUT JUDY */
  --fs-h2-sm:      1.5625rem;  /* 25px — DELIVERING EXCELLENCE */
  --fs-h2-xs:      1.375rem;   /* 22px — THE EXPERIENCE TO LEAD */
  --fs-h2-mission: 1.3125rem;  /* 21px — My mission is to enhance… */
  --fs-mission-item: 1.0625rem;/* 17px — mission item headings */
  --fs-mission-body: 0.75rem;  /* 12px — mission item copy */
  --fs-h3:         1.125rem;   /* 18px — card headings */
  --fs-stat:       1.5625rem;  /* 25px — 72 / 95% / $300+ Million */
  --fs-lead:       1.1875rem;  /* 19px — Vision hero paragraph */
  --fs-lead-sm:    1rem;       /* 16px — hero subhead */
  --fs-eyebrow:    1.0625rem;  /* 17px — 5. The Work Continues */
  --fs-cta:        1.125rem;   /* 18px — Let's Keep Moving… */
  --fs-title:      0.8125rem;  /* 13px — column and mission titles */
  --fs-creds:      0.75rem;    /* 12px — credentials line */
  --fs-body:       0.625rem;   /* 10px — body copy */
  --fs-nav:        0.6875rem;  /* 11px — nav, buttons, small caps labels */
  --fs-caption:    0.5rem;     /* 8px  — stat captions, footer disclaimer */

  --lh-tight:  1.04;
  --lh-snug:   1.25;
  --lh-body:   1.3;    /* 13px steps at 10px, measured off the letter */

  --track-display: 0.01em;
  --track-label:   0.06em;

  /* ---- Spacing --------------------------------------------------------
     One scale. Vertical rhythm is applied at section level only; nothing
     inside a section sets its own outer margin (IMG2VIBE §8.2). */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.75rem;
  --s-8:  3.5rem;

  /* One breathing value for every band, start and end. The comps are
     tighter than this (2-13px); opened up on the client's instruction
     2026-08-02 and applied uniformly rather than per section. */
  --section-y: 2rem;

  /* ---- Measured container widths --------------------------------------
     The comp does not use one container: each band sets its own content
     span. Reproduced rather than normalised (§0). */
  --wrap-header: 62.75rem;    /* 1004px — logo edge to DONATE edge */
  --wrap-stats:  50.375rem;   /* 806px  */
  --wrap-about:  51.625rem;   /* 826px  */
  --wrap-exp:    52.75rem;    /* 844px  */
  --wrap-cta:    54.5625rem;  /* 873px  */
  --wrap-cards:  54.5625rem;  /* 873px  */
  --wrap-vision: 53rem;       /* 848px  */

  --radius-sm: 3px;
  --radius:    5px;
  --radius-lg: 8px;
}

/* Root scale. 1.5625vw lands on 16px at the comp's 1024 and 22.5px at 1440,
   which is where the comp's own proportions put a 14px body. */
html {
  font-size: clamp(14px, 1.5625vw, 22.5px);
}

/* Below the tablet breakpoint the page stops being a scaled comp and becomes
   a phone layout: fixed root, and a type scale rebuilt for reading rather
   than for matching the image. Only tokens change here — no component in
   site.css knows about the breakpoint. */
@media (max-width: 47.9375em) {
  html { font-size: 16px; }

  :root {
    --fs-hero:       2.25rem;
    --fs-hero-alt:   2.5rem;
    --fs-h2:         1.75rem;
    --fs-h2-sm:      1.625rem;
    --fs-h2-xs:      1.5rem;
    --fs-h2-mission: 1.375rem;
    --fs-mission-item: 1.1875rem;
    --fs-mission-body: 1rem;
    --fs-h3:         1.25rem;
    --fs-stat:       2rem;
    --fs-lead:       1.0625rem;
    --fs-lead-sm:    1.0625rem;
    --fs-eyebrow:    1rem;
    --fs-cta:        1.375rem;
    --fs-title:      1.0625rem;
    --fs-creds:      0.9375rem;
    --fs-body:       1rem;
    --fs-nav:        0.9375rem;
    --fs-caption:    0.8125rem;
  }
}