/* ============================================================
   DESIGN TOKENS — Middelburg College
   ------------------------------------------------------------
   PER-SCHOOL FILE. Re-skin by editing only this file.
   Palette drawn from the official logo: navy (ribbon banners)
   + crimson (shield) + gold (laurel wreath / stars).
   Usage discipline:
     --navy / --navy-2        → structural: nav, hero, footer, dark sections
     --accent / --accent-dark → crimson red: eyebrows, icons, em text, buttons
     --gold                   → reserved (laurel accent, not actively used)
     --paper / --paper-2      → off-white / navy-tinted alternating sections
   ============================================================ */
:root{
  /* Brand palette ------------------------------------------- */
  --navy:         #1c2b6a;   /* deep navy — logo ribbon banners */
  --navy-2:       #243585;   /* slightly lighter navy — hover states */
  --accent:       #c0272d;   /* crimson red — eyebrows, icons, em text, CTA buttons */
  --accent-dark:  #9a1f24;   /* deeper crimson — links, borders, hover */
  --gold:         #d4a520;   /* logo laurel gold — reserved, not actively used */

  /* Button surface (override here per school, not in styles.css) */
  --btn-bg:    var(--accent);
  --btn-hover: var(--accent-dark);

  /* Neutrals ------------------------------------------------- */
  --ink:    #1a2235;
  --muted:  #5a6070;
  --line:   rgba(28,43,106,.12);
  --paper:  #f9f7f5;          /* warm off-white — default sections */
  --paper-2:#edf0f8;          /* cool navy-tinted — alternating sections */
  --white:  #ffffff;

  /* Type ----------------------------------------------------- */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(2.6rem, 5.5vw, 4.8rem);
  --fs-h2:   clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:   1.35rem;
  --fs-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --eyebrow: .16em;

  /* Shape ---------------------------------------------------- */
  --r-md: 14px;
  --r-lg: 26px;
  --r-pill: 999px;
  --maxw: 1180px;
  --shadow: 0 18px 50px -22px rgba(28,43,106,.38);
}
           