/* ============================================================
   WILLIAMS PREP — BRAND TOKENS  (single source of truth)
   ------------------------------------------------------------
   This file is the ONLY place you edit to swap the brand scheme.
   The pages all read from these tokens via site.css.

   CURRENT SCHEME:  Option 02C — "Digital Future"
   Elevated, Future-Forward. Aspirational.  (client-selected)

   TO SWAP TO ANOTHER OPTION:
     1. COLORS .... replace the hex values in the palette block.
     2. FONTS ..... change the @import line + the two --font-* tokens.
     3. LOGO ...... swap the image file in partials.js (search LOGO),
                    currently Williams_LOGO2C.png. Token kept here too.
     4. TAGLINE ... edit --brand-tagline below; it appears everywhere
                    automatically via the .brand-tagline class.
   ============================================================ */

/* ---- FONTS (swap here) ---- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{

  /* ============================================================
     02C "DIGITAL FUTURE" PALETTE  (from the branding board)
     These five are the brand-given colors. Edit to re-scheme.
     ============================================================ */
  --c-deep-indigo : #0D355A;   /* Deep Indigo    — primary dark    */
  --c-cyan        : #3BB4F3;   /* Luminous Cyan  — bright highlight */
  --c-steel       : #00AEB4;   /* Steel Blue     — primary accent   */
  --c-white       : #FFFFFF;   /* White                            */
  --c-pale        : #EAF1F5;   /* Pale Gray      — light surface    */

  /* ---- DERIVED shades (not on the board — tuned from the palette).
          If you re-scheme, nudge these to match the new colors. ---- */
  --c-indigo-deep : #0D355A;   /* footer/hero wells — matched to the approved live site (single navy, not the old darker teal) */
  --c-indigo-line : #1E4A63;   /* hairlines on dark backgrounds        */

  /* ============================================================
     SEMANTIC TOKENS  (the pages use THESE, not the raw colors,
     so a re-scheme rarely touches the HTML.)
     ============================================================ */
  --brand-ink        : var(--c-deep-indigo); /* headings, dark UI    */
  --brand-ink-deep   : var(--c-indigo-deep); /* darkest wells        */
  --brand-accent     : var(--c-steel);       /* buttons, links       */
  --brand-accent-2   : var(--c-cyan);        /* highlights, gradients*/
  --brand-surface    : var(--c-pale);        /* tinted section bg    */
  --brand-line       : #d7dce8;              /* borders on light     */
  --brand-line-dark  : var(--c-indigo-line); /* borders on dark      */
  --brand-white      : #ffffff;

  --brand-text       : #1a2344;   /* body copy on light            */
  --brand-muted      : #586079;   /* secondary copy on light       */
  --brand-on-dark    : #e3eef3;   /* body copy on dark             */
  --brand-muted-dark : #93afbf;   /* secondary copy on dark        */

  /* ---- TYPE (swap here) ---- */
  --font-display : 'Sora', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body    : 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---- BRAND STRINGS (swap here) ---- */
  --brand-prefix  : 'The';
  --brand-name    : 'Williams Preparatory School';
  --brand-tagline : 'Preparing Thinkers for the Next World';
  --brand-logo    : 'Williams_LOGO2C.png';  /* reference only — see partials.js */

  /* ---- SHAPE (02C feel: sleek, refined geometry) ---- */
  --radius      : 10px;
  --radius-sm   : 7px;
  --radius-pill : 999px;
  --maxw : 1240px;
}

/* Tagline helper: place <span class="brand-tagline"></span> anywhere
   and it renders the current --brand-tagline. One edit swaps them all. */
.brand-tagline::before{ content: var(--brand-tagline); }