/* ==========================================================================
   St Luke's College — Colours & Type
   --------------------------------------------------------------------------
   Every value here comes from the Brand Guidelines (January 2026), read off
   the colourway pages, not guessed:
     Primary   Dark Navy #00075a · Light Navy #272190 · Light Blue #aec1ff
               Light Sand #e9e7da · Dark Sand #c9c7b9
     Secondary Lilac #6764ac · Teal #01a9a9 · Mint #bdfff1
               Clementine #ff8657 · Sunny #ffc847
     Type      Playfair Display (headings, italic for the emotive word)
               Work Sans (body; Medium in capitals for sub-headings)
   Fonts are self-hosted: a viewer on the ThriveEd site saw fallback fonts
   because Google Fonts was blocked on their network.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfair-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/playfair-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Work Sans"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/worksans-latin.woff2") format("woff2");
}

:root {
  /* ---------- BRAND COLOURS (never add a hex outside this block) -------- */
  --sl-navy:        #00075a;  /* Dark Navy. Header, footer, dark bands     */
  --sl-navy-2:      #272190;  /* Light Navy. Accent on light, CTA band     */
  --sl-blue:        #aec1ff;  /* Light Blue. Accent on dark               */
  --sl-sand:        #e9e7da;  /* Light Sand. Warm band                     */
  --sl-sand-dark:   #c9c7b9;  /* Dark Sand. Rules, quiet borders           */
  --sl-sand-pale:   #f6f5ef;  /* Light Sand at ~40% on white: page tint    */

  --sl-lilac:       #6764ac;
  --sl-teal:        #01a9a9;
  --sl-mint:        #bdfff1;
  --sl-clementine:  #ff8657;
  --sl-sunny:       #ffc847;

  --sl-white:       #ffffff;
  --sl-ink:         #0d1240;  /* body text: navy pulled toward black       */

  /* Phase accents, decorative only (never text on white) */
  --phase-preschool:   var(--sl-sunny);
  --phase-preparatory: var(--sl-teal);
  --phase-high:        var(--sl-lilac);

  /* ---------- SEMANTIC ------------------------------------------------- */
  --fg-1: var(--sl-navy);
  --fg-2: #3b3f66;
  --fg-3: #6b6e8c;
  --fg-on-dark: var(--sl-white);
  --fg-on-dark-muted: #cfd5f2;

  --line-soft: rgba(0, 7, 90, .12);
  --line-on-dark: rgba(255, 255, 255, .2);

  /* ---------- TYPE ----------------------------------------------------- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Work Sans", Aptos, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-display-xl: clamp(2.7rem, 5.6vw, 5.4rem);
  --fs-lead: 1.2rem;
  --tracking-eyebrow: .18em;
  --tracking-button: .12em;

  /* ---------- SHAPE & MOTION ------------------------------------------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px;
  --sh-card: 0 14px 34px -14px rgba(0, 7, 90, .24);
  --sh-lift: 0 26px 52px -16px rgba(0, 7, 90, .32);
  --ease-natural: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms; --dur-med: 280ms;
}