/* ==========================================================================
   MOREHUMAN ED DESIGN TOKENS (brand kit, 2026-10-19)
   Palette and logo come from the MoreHuman Ed brand kit. Typefaces are the exact
   Discovery Lab fonts (verified from its source), so the two sites read as one family.
   Fonts are self-hosted (no CDN: school networks block them).
   ========================================================================== */

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(./fonts/fraunces-latin-1.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(./fonts/public-sans-latin-3.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(./fonts/jetbrains-mono-latin-1.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Typefaces */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Public Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid type scale */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.44rem + 0.62vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.74rem + 1.05vw, 2.66rem);
  --step-4:  clamp(2.44rem, 2.09rem + 1.75vw, 3.55rem);
  --step-5:  clamp(2.75rem, 2.2rem + 2.8vw, 4.6rem);

  /* Space: 4px base, geometric */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem; --sp-9: 6rem;

  --measure: 66ch;
  --shell: 74rem;

  /* Brand colour */
  --navy: #142B3D;       /* Deep Navy: text, dark surfaces, primary marks */
  --paper: #F5F0E6;      /* Warm Paper: main background */
  --forest: #587361;     /* Forest Green: learning, growth, systems */
  --sage: #C9D2C0;       /* Soft Sage: gentle backgrounds */
  --terracotta: #D9774B; /* Terracotta: direction points, one warm human detail (decorative only) */
  --grid-grey: #D8D5CA;  /* Grid Grey: notebook grid and quiet rules */
  --charcoal: #202624;   /* Charcoal: long text where softer contrast helps */

  /* Roles */
  --surface: #FBF8F1;  --surface-2: #ECE8DB;
  --ink: var(--navy);  --ink-2: #3D5163;  --ink-3: #586775;
  --line: #D8D5CA8C;   --line-strong: #142B3D33;
  --accent: var(--forest);  --accent-text: #4A6354;  --accent-hi: #6A8573;  --accent-ink: #FBF8F1;
  --accent-wash: #58736118;
  --signal: var(--terracotta);  --signal-wash: #D9774B1F;
  --blue: #2F5871; /* focus ring only */

  /* Motion: every duration multiplies --motion; reduced-motion sets it to 0 */
  --motion: 1;
  --dur-fast: calc(140ms * var(--motion));
  --dur-mid:  calc(280ms * var(--motion));
  --dur-slow: calc(600ms * var(--motion));
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);

  /* Elevation: hairlines do the work, shadow only for things that float */
  --shadow-1: 0 1px 2px rgb(20 43 61 / 0.05);
  --shadow-2: 0 2px 4px rgb(20 43 61 / 0.05), 0 8px 20px -8px rgb(20 43 61 / 0.14);
  --shadow-3: 0 4px 8px rgb(20 43 61 / 0.06), 0 20px 48px -16px rgb(20 43 61 / 0.22);

  --radius: 6px;
  --radius-lg: 12px;
  --focus-ring: 3px;
  --grid: 48px;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
}