/* FACHS shared brand tokens. Pulled from the live sites on 2026-10-21:
   training + advisory (fachs.co.za, consulting.fachs.co.za), college, school.
   The insurance site was returning a WordPress critical error that day, so it is not sampled.
   Copy this file into each site as brand.css. Change a colour here, then copy again. */
:root {
  /* Blues */
  --fachs-navy-900: #141e3d;   /* school header and buttons; darkest ground */
  --fachs-navy-700: #2f3059;   /* college headings and panels */
  --fachs-blue-600: #30318b;   /* training and advisory brand blue */
  /* Night: one tonal scale built from the hero navy (#141e3d, hue 225). 900 is the hero ground; go lighter for panels, borders and tints, darker for deep grounds. */
  --fachs-night-950: #0c1327;
  --fachs-night-900: #141e3d;
  --fachs-night-800: #212f59;
  --fachs-night-700: #314172;
  --fachs-night-600: #455892;
  --fachs-night-500: #6276b2;
  --fachs-night-400: #909fcb;
  --fachs-night-300: #b9c2df;
  --fachs-night-200: #dbe0f0;
  --fachs-night-100: #edf0f8;
  --fachs-night-50:  #f6f7fb;
  /* Crimson: the action colour. Buttons, links on light grounds, the logo flash. */
  --fachs-crimson-600: #93193c; /* school #93193c; training #951432; college #881937 */
  --fachs-crimson-700: #7a1432;
  /* Sky: sparing highlight, and links on dark grounds (6:1 on navy-900) */
  --fachs-sky-500: #26a8e0;
  /* Neutrals */
  --fachs-ink: #3a3a3a;
  --fachs-paper: #f9f9f9;
  --fachs-white: #ffffff;
  /* Type: Open Sans is on all four sampled sites. Montserrat is the school's heading face
     and sits closest to the Varela Round and Poppins the other sites use. */
  --fachs-font-head: "Montserrat", "Varela Round", system-ui, sans-serif;
  --fachs-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Type scale: seven sizes for every FACHS site. Set no font-size outside these.
     The names are WordPress theme.json font-size slugs (x-small to xxx-large). In a WordPress theme, theme.json (fachs-theme.json
     in this folder) sets --wp--preset--font-size--* and these tokens follow it; on a static site the clamp() fallback applies.
     Each size grows with screen width; the larger ones are also capped by screen height so they fit a short laptop. */
  --fachs-font-size-x-small:   var(--wp--preset--font-size--x-small, clamp(.75rem, .73rem + .05vw, .8125rem));               /* 12–13px  captions, labels in capitals, dates, fine print, footer and legal links */
  --fachs-font-size-small:     var(--wp--preset--font-size--small, clamp(.875rem, .85rem + .1vw, .9375rem));                   /* 14–15px  card text, job titles, form labels, menus, tables, secondary lines */
  --fachs-font-size-medium:    var(--wp--preset--font-size--medium, clamp(1rem, .97rem + .1vw, 1.0625rem));               /* 16–17px  body text, buttons, form fields (never below 16px, so iOS does not zoom) */
  --fachs-font-size-large:     var(--wp--preset--font-size--large, clamp(1.0625rem, 1rem + .25vw, 1.25rem)); /* 17–20px  lead paragraph under a heading, card titles, FAQ questions, names */
  --fachs-font-size-x-large:   var(--wp--preset--font-size--x-large, clamp(1.25rem, min(1.05rem + .7vw, 3.2vh), 1.625rem));        /* 20–26px  sub-headings (h3), pop-up titles */
  --fachs-font-size-xx-large:  var(--wp--preset--font-size--xx-large, clamp(1.5rem, min(1.1rem + 1.6vw, 5vh), 2.375rem));    /* 24–38px  section headings (h2); the h1 of inner pages (grade, phase, about, fees, legal) */
  --fachs-font-size-xxx-large: var(--wp--preset--font-size--xxx-large, clamp(1.875rem, min(1rem + 3vw, 7vh), 3.25rem));      /* 30–52px  the home page h1 only */
  /* Line height and letter spacing that go with the sizes */
  --fachs-line-height-tight: 1.1;   /* h1, h2 */
  --fachs-line-height-snug:  1.3;   /* h3, card titles, labels */
  --fachs-line-height-body:  1.55;  /* paragraphs */
  --fachs-letter-spacing-display: -.015em; /* h1, h2 */
  --fachs-letter-spacing-caps:    .08em;   /* small labels in capitals */
  /* One radius system */
  --fachs-radius: 6px;
}