/* ═══════════════════════════════════════════════════════════════════════
   SELF-HOSTED FONTS — no CDN, no internet required
   ───────────────────────────────────────────────────────────────────────
   Downloaded from Google Fonts (both are open-licence: Libre Baskerville
   and Source Sans 3 are SIL Open Font License 1.1) and served from
   assets/fonts/. This removes the third-party request entirely: the site
   works offline, there is no font flash from a slow CDN, and no visitor
   data is sent to Google just to render text (GDPR-relevant for a school).

   Paths are relative to THIS FILE (css/), so ../assets/… resolves the same
   whether the page is at the root or nested in pages/<section>/.

   Source Sans 3 ships as a variable font: one file covers weights 300–700,
   which is why only three files are needed.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400 700;         /* one file serves both weights */
  font-display: swap;           /* text renders immediately in the fallback */
  src: url('../assets/fonts/libre-baskerville-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/libre-baskerville-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;         /* variable font, full range */
  font-display: swap;
  src: url('../assets/fonts/source-sans-3-latin.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════════════
   HIGHER GROUND ACADEMY — V2.0 DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────
   THE single source of truth for all design values.
   Never hard-code a color, size, or shadow anywhere else in the CSS.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────
     1. BRAND COLORS  (fixed — do not alter without brand approval)
     ───────────────────────────────────────────────────────────────────── */
  --navy:            #0D1F3B;   /* Primary brand navy */
  --navy-2:          #162C52;   /* Raised navy surfaces */
  --navy-3:          #1E3A6E;   /* Navy hover / accents */
  --navy-deep:       #081527;   /* Footer, deepest navy */

  /* ── THE canonical HGA gold (PMS 7407). Single source of truth. ──────
     Every gold in the project resolves to this value or to one of the
     four derivatives below. There are NO other golds.

     The three solid derivatives are the SAME HUE (45°) at different
     lightness — they exist because raw --gold is only 2.35:1 on white
     and cannot legally carry small text there. They are accessibility
     requirements, not alternative brand colours. */
  --gold:            #C6A646;   /* THE brand gold — only value in use */
  --gold-rgb:        198, 166, 70;  /* same colour, for rgba() alphas */
  --gold-lt:         #E4D5A3;   /* Gold tint, for navy backgrounds */
  --gold-dk:         #8A7228;   /* Gold on light bg (AA for large text) */
  --gold-deep:       #6E5A1E;   /* Gold text on cream/white, AA small text */

  /* Transparent golds, all derived from --gold-rgb so a brand change to
     the gold above propagates everywhere. Never invent a new gold hex to
     fake an opacity — reach for one of these. */
  --gold-a15:        rgba(var(--gold-rgb), .15);
  --gold-a28:        rgba(var(--gold-rgb), .28);
  --gold-a45:        rgba(var(--gold-rgb), .45);

  --cream:           #F4F1E8;   /* Brand cream — page/section background */
  --cream-2:         #FAF8F2;   /* Lighter cream */
  --white:           #FFFFFF;

  /* ─────────────────────────────────────────────────────────────────────
     2. CAMPUS / DIVISION ACCENTS  (official — fixed)
     ───────────────────────────────────────────────────────────────────────
     Each academy owns one colour so families learn to read it at a glance.

       Elementary  (K–5)   Teal          #167B8F
       Junior High (6–7)   Forest Green  #1C5E3B
       Secondary   (8–12)  Crimson       #6B1E2C

     NEVER hard-code these hex values in a component — always use the token.

     CONTRAST, measured (this is why the -text variants exist):

       role                     teal    forest  crimson
       white text ON colour     4.93    7.74    11.37   → all PASS AA
       colour AS text on white  4.93    7.74    11.37   → all PASS AA
       colour AS text on CREAM  4.36 ✗  6.85    10.07   → TEAL FAILS

     Cream is used for the side-nav, callouts, and alternating sections, so
     teal cannot be a text colour there. Use --campus-*-text for any TEXT
     on a light background; use the base token for chips, bars, dots, and
     borders. The -text tokens clear AA on white AND cream.
     ───────────────────────────────────────────────────────────────────── */

  /* Canonical campus colours — chips, bars, dots, borders, small fills */
  --campus-elementary:       #167B8F;
  --campus-junior:           #1C5E3B;
  --campus-secondary:        #6B1E2C;

  /* Text-safe variants — for campus colour used AS TEXT on white or cream.
     teal 7.48:1 · forest 11.13:1 · crimson 14.53:1 on white
     teal 6.63:1 · forest  9.86:1 · crimson 12.87:1 on cream */
  --campus-elementary-text:  #0F5D6D;
  --campus-junior-text:      #134429;
  --campus-secondary-text:   #4E1420;

  /* Tints — pale backgrounds behind campus content */
  --campus-elementary-tint:  #E3F2F5;
  --campus-junior-tint:      #E3F0E9;
  --campus-secondary-tint:   #F6E5E8;

  /* Legacy aliases. Existing components reference these; they now point at
     the canonical campus tokens so there is still one source of truth. */
  --teal:            var(--campus-elementary);
  --teal-dk:         var(--campus-elementary-text);
  --teal-lt:         var(--campus-elementary-tint);

  --forest:          var(--campus-junior);
  --forest-dk:       var(--campus-junior-text);
  --forest-lt:       var(--campus-junior-tint);

  --crimson:         var(--campus-secondary);
  --crimson-dk:      var(--campus-secondary-text);
  --crimson-lt:      var(--campus-secondary-tint);

  /* ─────────────────────────────────────────────────────────────────────
     3. NEUTRALS  (all AA-verified against white and cream)
     ───────────────────────────────────────────────────────────────────── */
  --ink:             #14202F;   /* Body text — 14.8:1 on white */
  --ink-2:           #3D4956;   /* Secondary text — 8.9:1 on white */
  --ink-3:           #5C6875;   /* Muted text — 5.7:1 on white (AA) */
  /* Decorative borders (cards, dividers, table rules). These are BELOW the
     WCAG 1.4.11 3:1 threshold on purpose — they carry no information and
     are exempt as "pure decoration". Never use them on a form control. */
  --line:            #DDD8CC;   /* Decorative border on cream */
  --line-2:          #E8E4DA;   /* Decorative border, lighter */
  --line-navy:       rgba(255,255,255,.16);  /* Decorative border on navy */

  /* Functional border — form controls and any boundary a user must SEE to
     operate the UI. 3.69:1 on white / 3.27:1 on cream, passing 1.4.11. */
  --line-input:      #8C8478;

  /* ─────────────────────────────────────────────────────────────────────
     4. TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────── */
  --font-display:    'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-body:       'Source Sans 3', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale — a clear 40 / 28 / 17 rhythm.
     Page title dominates, section header is unmistakably secondary, body
     sits at a comfortable 17px. Fluid, clamped so it never breaks layout. */
  --fs-xs:           0.75rem;    /* 12px — eyebrows, chips, meta          */
  --fs-sm:           0.875rem;   /* 14px — secondary text, captions       */
  --fs-base:         0.9375rem;  /* 15px — dense UI text, table rows      */
  --fs-md:           1.0625rem;  /* 17px — BODY COPY                      */
  --fs-lg:           1.1875rem;  /* 19px — lead paragraphs                */
  --fs-xl:           clamp(1.25rem, 1.1rem + .5vw, 1.4rem);    /* 20–22 h4 */
  --fs-h3:           clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); /* 19–22  */
  --fs-h2:           clamp(1.5rem, 1.15rem + 1.5vw, 1.75rem);  /* 24–28 h2 */
  --fs-h1:           clamp(1.9rem, 1.35rem + 2.6vw, 2.5rem);   /* 30–40 h1 */
  --fs-hero:         clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);   /* 36–56    */

  --lh-tight:        1.2;      /* Headings                                */
  --lh-snug:         1.35;
  --lh-body:         1.6;      /* Body copy                               */

  --ls-tight:        -0.01em;  /* Headings — subtle, not cramped          */
  --ls-wide:         0.06em;
  --ls-caps:         0.12em;   /* Eyebrows / small-caps labels            */

  /* ─────────────────────────────────────────────────────────────────────
     5. SPACING  (tight institutional rhythm — minimal scrolling)
     ───────────────────────────────────────────────────────────────────── */
  --sp-1:            0.25rem;   /*  4px — hairline nudges only */
  --sp-2:            0.5rem;    /*  8px */
  --sp-3:            1rem;      /* 16px */
  --sp-4:            1.5rem;    /* 24px */
  --sp-5:            2.5rem;    /* 40px */
  --sp-6:            4rem;      /* 64px */
  --sp-7:            6rem;      /* 96px */
  --sp-8:            8rem;      /* 128px */
  --sp-9:            10rem;     /* 160px */

  /* Vertical rhythm for full-width sections */
  --section-y:       clamp(2.5rem, 1.9rem + 2.6vw, 4rem);    /* 40 → 64 */
  --section-y-sm:    clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);  /* 24 → 40 */

  /* ─────────────────────────────────────────────────────────────────────
     6. LAYOUT
     ───────────────────────────────────────────────────────────────────── */
  --wrap:            1240px;   /* Standard content width */
  --wrap-narrow:     820px;    /* Long-form reading width */
  --wrap-wide:       1440px;   /* Full-bleed-ish sections */
  --gutter:          clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* Header heights — JS and CSS both rely on these */
  --utility-h:       36px;     /* Thin navy utility bar */
  --header-h:        104px;    /* Tall main bar (default state) */
  --header-h-compact: 72px;    /* Compacted on scroll */

  /* ─────────────────────────────────────────────────────────────────────
     7. RADII, SHADOWS, MOTION
     ───────────────────────────────────────────────────────────────────── */
  --radius-sm:       6px;
  --radius:          10px;
  --radius-lg:       16px;
  --radius-pill:     999px;

  /* Layered: a tight contact shadow + a soft ambient one. Reads as real
     depth rather than a single hard drop. */
  --shadow-xs:       0 1px 2px rgba(13,31,59,.05);
  --shadow-sm:       0 1px 2px rgba(13,31,59,.05),
                     0 4px 12px rgba(13,31,59,.05);
  --shadow-md:       0 1px 2px rgba(13,31,59,.06),
                     0 8px 24px rgba(13,31,59,.07);
  --shadow-lg:       0 2px 4px rgba(13,31,59,.06),
                     0 16px 48px rgba(13,31,59,.11);
  --shadow-gold:     0 1px 2px rgba(13,31,59,.08),
                     0 8px 24px var(--gold-a28);

  --ease:            cubic-bezier(.4, 0, .2, 1);
  --dur-fast:        .15s;
  --dur:             .25s;
  --dur-slow:        .4s;

  /* ─────────────────────────────────────────────────────────────────────
     8. FOCUS RING  (WCAG 2.1 AA 1.4.11 — needs 3:1 vs. ADJACENT colors)
     ───────────────────────────────────────────────────────────────────────
     Raw --gold (#C6A646) is only 2.35:1 on white, so it CANNOT be the
     default ring. --gold-dk (#8A7228) is the one brand-gold value that
     clears 3:1 on white (4.65:1), cream (4.12:1) AND navy (3.54:1).
     On navy surfaces we upgrade to bright --gold for extra visibility. */
  --focus-color:     var(--gold-dk);
  --focus-ring:      3px solid var(--focus-color);
  --focus-offset:    2px;

  /* ─────────────────────────────────────────────────────────────────────
     9. Z-INDEX SCALE
     ───────────────────────────────────────────────────────────────────── */
  --z-base:          1;
  --z-sticky:        100;
  --z-header:        200;
  --z-dropdown:      300;
  --z-mobile-nav:    400;
  --z-skip:          500;

  /* ─────────────────────────────────────────────────────────────────────
     10. TOUCH TARGETS  (WCAG 2.5.5 — never below 44px)
     ───────────────────────────────────────────────────────────────────── */
  --tap:             44px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DIVISION THEME CLASSES
   Apply to a section or <body> to re-theme accent-driven components.
   ═══════════════════════════════════════════════════════════════════════ */
/* Apply to a page or section to theme every accent-driven component.
   --accent      → chips, bars, dots, borders  (never text on light)
   --accent-text → campus colour used AS TEXT   (AA on white and cream)
   --accent-tint → pale background wash */
.theme-elementary {
  --accent:      var(--campus-elementary);
  --accent-text: var(--campus-elementary-text);
  --accent-dk:   var(--campus-elementary-text);
  --accent-lt:   var(--campus-elementary-tint);
  --accent-tint: var(--campus-elementary-tint);
}
.theme-junior-high {
  --accent:      var(--campus-junior);
  --accent-text: var(--campus-junior-text);
  --accent-dk:   var(--campus-junior-text);
  --accent-lt:   var(--campus-junior-tint);
  --accent-tint: var(--campus-junior-tint);
}
.theme-secondary {
  --accent:      var(--campus-secondary);
  --accent-text: var(--campus-secondary-text);
  --accent-dk:   var(--campus-secondary-text);
  --accent-lt:   var(--campus-secondary-tint);
  --accent-tint: var(--campus-secondary-tint);
}

/* Default accent when no division theme is applied */
/* Default when no campus theme applies — institution-wide pages stay
   navy/gold/cream and must never pick up a campus colour. */
:root {
  --accent: var(--navy); --accent-text: var(--navy);
  --accent-dk: var(--navy-deep); --accent-lt: var(--cream);
  --accent-tint: var(--cream);
}