/**
 * School OS palette: the public site's colours, named for what a school has on its walls and desks.
 * Linked before marketing-surface-families.css, which gives each family one of these materials.
 */

/* ── School OS palette (2026-10-29) ─────────────────────────────────────────
   One palette for the whole public site, named for what a school actually has on its walls and desks.
   Marketing families pick ONE material each (see marketing-surface-families.css, "School OS"); a page no longer
   picks its own hue. The accents are the readable ink of each material on paper; dark mode swaps in the chalk-lit versions. */
html {
  --school-chalkboard: #10261C;
  --school-chalk: #F7F3E6;
  --school-paper: #FBF8EE;
  --school-manila: #F1EBD8;
  --school-ruled: #BCD0E6;
  --school-margin: #D9867B;
  --school-ledger: #D6E6D8;
  --school-highlighter: #F2B705;
  --school-green: #1F5C43;
  --school-gold: #8A6A00;
  --school-red: #B3382C;
  --school-blue: #2F5D8C;
  --school-brown: #7A4E1D;
  --school-ink: #12241B;
  --school-ink-muted: #44574D;
  --school-tile: #FFFFFF;
}
html[data-theme="dark"],
html[data-theme="oled"] {
  --school-paper: #14221B;
  --school-manila: #1B2B22;
  --school-ruled: #3A5573;
  --school-margin: #8C4A42;
  --school-ledger: #1F3A2B;
  --school-green: #7BC49A;
  --school-gold: #F2B705;
  --school-red: #F09A8E;
  --school-blue: #8FB8E8;
  --school-brown: #D9A566;
  --school-ink: #F7F3E6;
  --school-ink-muted: #B9C4BA;
  --school-tile: #1B2B22;
}

/* Dark / OLED mapping for the marketing ink, surface, rule and tile tokens. The dark overrides that used to live in
   tokens-schoolhouse.css are in a file no page loads, so headings and chips kept their light-theme ink on a dark fill. */
html[data-theme="dark"],
html[data-theme="oled"] {
  --mkt-surface: var(--school-paper);
  --mkt-edt-bg: var(--school-paper);
  --mkt-edt-bg-soft: var(--school-manila);
  --mkt-ink: var(--school-ink);
  --mkt-edt-ink: var(--school-ink);
  --mkt-ink-2: var(--school-ink-muted);
  --mkt-edt-ink-muted: var(--school-ink-muted);
  --mkt-edt-ink-subtle: var(--school-ink-muted);
  --mkt-text: var(--school-ink);
  --mkt-text-muted: var(--school-ink-muted);
  --mkt-primary: var(--school-ink);
  --mkt-primary-light: var(--school-ink-muted);
  --mkt-tile: var(--school-tile);
  --mkt-rule: color-mix(in srgb, var(--school-ink) 16%, transparent);
  --mkt-edt-rule: color-mix(in srgb, var(--school-ink) 16%, transparent);
  --mkt-border: color-mix(in srgb, var(--school-ink) 16%, transparent);
}
html[data-theme="dark"] body.marketing-surface,
html[data-theme="oled"] body.marketing-surface {
  background: var(--school-paper);
  color: var(--school-ink);
}