/* AUTO-GENERATED by mmg-design/sync.mjs — do not edit here.
   Source of truth: ~/mmg-design/css/foundations.css
   Run `node sync.mjs` in ~/mmg-design to update every site at once. */

/* ═══════════════════════════════════════════════════════════════════════════
   Montessori Makers Group — Foundations (tokens only)

   THE SOURCE OF TRUTH lives at ~/mmg-design/css/foundations.css.
   Every copy in a site repo is generated by `node sync.mjs`. Do not hand-edit
   a vendored copy — `node sync.mjs --check` will fail and the next sync will
   overwrite it.

   Framework-agnostic: plain custom properties, no Tailwind directives, no
   nesting. Works in Tailwind 3, Tailwind 4, and the hand-written PWAs.

   ── Why this file exists ──────────────────────────────────────────────────
   Three copies of the previous mmg-foundations.css were live (field-guide,
   family-companion, leadership-meridian) and all three had different
   checksums. Meanwhile mmg-site alone had accumulated 408 distinct hex
   literals, 39 line-heights, and ten different letter-spacings all doing the
   job of "small uppercase label". Every value was individually defensible and
   no two pages agreed, which is precisely what makes a site read as generated
   rather than art-directed.

   The rule for adding anything here: a new token needs a job no existing
   token does. "Slightly different" is not a job.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ───────────────────────────────────────────────────────────────
     Navy and gold are the whole identity. Everything else is neutral. */
  --navy: #0e1a7a;        /* primary: CTAs, headings, dark sections */
  --navy-deep: #0b1566;   /* a deeper navy — banded surfaces above a navy field */
  --navy-hover: #162270;  /* navy surfaces on hover */
  --gold: #d6a758;        /* accent */
  --gold-hover: #c09240;  /* gold surfaces on hover */
  --gold-ink: #8A6014;    /* gold darkened far enough to pass AA as TEXT on cream */
  --gold-mid: #e1be7a;    /* mid tint: cube shadow face */
  --gold-soft: #f0d9a1;   /* softest tint: cube highlight, washes */

  --white: #ffffff;
  --black: #000000;

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --bg: #FAF9F7;          /* warm off-white page ground */
  --bg-cream: #F2EDE6;    /* warm section ground */
  --bg-white: #FFFFFF;

  /* ── Ink: ONE warm neutral ramp, four steps ──────────────────────────────
     This replaces twelve stock Tailwind slate/gray values that had spread
     across the family (#374151, #64748B, #94A3B8, #6B7280, #9CA3AF, #4B5563,
     #CBD5E1, #111827, #E5E7EB, #F3F4F6, #1F2937, #D1D5DB).

     Those greys are cool and blue-tinted; every ground here is warm. Cool text
     on a warm ground is the single loudest "stock palette" signal, and having
     twelve of them meant no two pages agreed on what "muted" meant.

     Each step is matched in LIGHTNESS to the value it replaces, so adopting
     the ramp changes the temperature of a neutral without changing its
     contrast against either the cream or the navy. Four steps, one job each.
     Add a fifth only with a reason you can state. */
  --ink: #1A1815;         /* headings and highest-contrast text on light */
  --ink-body: #3D3A35;    /* body copy */
  --ink-mute: #6B655C;    /* meta, captions, eyebrows */
  --ink-faint: #9A9288;   /* the faintest supporting text that still passes AA */

  /* The same idea for type sitting on navy. */
  --on-navy: #FFFFFF;
  --on-navy-body: #C8C4D8;
  --on-navy-mute: #9C97AD;

  /* ── Footer ──────────────────────────────────────────────────────────────
     The footer runs far darker than the navy sections, so it needs its own
     pair. --on-footer is NOT --on-navy-mute: it was picked deliberately to
     clear WCAG AA on this background (5.75:1, where the stock #6b7280 managed
     only 3.98:1 and failed). Don't collapse it into the ink ramp. */
  --footer-bg: #080F19;
  --on-footer: #7A8FA3;

  /* ── Rules and hairlines ─────────────────────────────────────────────── */
  --rule: #E4DFD8;
  --rule-soft: #F2EDE6;
  --rule-strong: #D3CCC2;
  --rule-navy: rgba(255, 255, 255, 0.12);

  /* ── Type families ───────────────────────────────────────────────────── */
  --font-heading: 'TheSeasons', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

  /* ── Type scale ──────────────────────────────────────────────────────── */
  --t-display-xl: 5.75rem;  /* 92px — hero */
  --t-display-lg: 4.5rem;
  --t-display: 3.5rem;
  --t-h1: 3rem;
  --t-h2: 2.25rem;
  --t-h3: 1.5rem;
  --t-h4: 1.25rem;
  --t-body-lg: 1.125rem;
  --t-body: 1rem;
  --t-body-sm: 0.875rem;
  --t-caption: 0.75rem;
  --t-eyebrow: 0.6875rem;   /* 11px */

  /* ── Tracking: size-specific, never one value for everything ─────────────
     Letterforms read further apart as they grow, so display type wants
     negative tracking and small type wants a touch of positive. A single
     global letter-spacing is always wrong at one end of the scale. The old
     blanket -0.01em left 92px display type looking loose and 20px headings
     looking cramped, simultaneously. */
  --track-display: -0.03em;
  --track-h1: -0.026em;
  --track-h2: -0.021em;
  --track-h3: -0.014em;
  --track-body: 0em;
  --track-small: 0.004em;
  --track-eyebrow: 0.18em;  /* the ONE value for small uppercase labels */
  --track-button: 0.07em;

  /* ── Leading: five steps ─────────────────────────────────────────────────
     Leading tracks size inversely: tight on display, loose on body. */
  --lead-display: 1.02;
  --lead-heading: 1.1;
  --lead-snug: 1.35;
  --lead-body: 1.65;
  --lead-relaxed: 1.75;

  /* ── Spacing (8px base) ──────────────────────────────────────────────── */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;
  --s-32: 8rem;    --s-40: 10rem;

  --section-y-sm: 5rem;
  --section-y-md: 7rem;
  --section-y-lg: 10rem;
  --gutter: 1.5rem;
  --gutter-lg: 2.5rem;
  --max-w: 80rem;

  /* ── Radii — sharp by default ────────────────────────────────────────── */
  --radius-0: 0;
  --radius-sm: 2px;   /* the rare exception: image frames */

  /* ── Elevation ───────────────────────────────────────────────────────────
     Negative spread so the shadow sits under the card rather than haloing it. */
  --shadow-card: 0 10px 28px -18px rgba(14, 26, 122, 0.30);
  --shadow-hover: 0 14px 36px -20px rgba(14, 26, 122, 0.28);
  --shadow-image: 0 8px 40px rgba(14, 26, 122, 0.30);

  /* ── Motion ──────────────────────────────────────────────────────────────
     Two curves and three durations for the whole family. The built-in CSS
     easings are too weak to read as deliberate. `ease-in` is deliberately
     absent: it withholds movement at exactly the moment the user is watching
     hardest, which reads as lag. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* entering or exiting */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* moving on screen */

  --dur-press: 140ms;   /* press feedback */
  --dur-ui: 200ms;      /* hover, colour, small state changes */
  --dur-enter: 280ms;   /* entrances and reveals */

  /* ═══ Back-compatibility aliases ═══════════════════════════════════════
     The PWAs (field-guide, family-companion, leadership-meridian) and the
     older marketing pages reference these names. They now resolve to the ramp
     above, so adopting this file re-tints those surfaces without touching
     their markup. Prefer the canonical names in new work. */
  --foreground: var(--ink);
  --fg: var(--ink);
  --fg-body: var(--ink-body);
  --fg-secondary: var(--ink-body);
  --fg-muted: var(--ink-mute);
  --fg-soft: var(--on-navy-mute);
  --fg-on-navy: var(--on-navy);
  --fg-footer: var(--on-navy-mute);
  --fg-footer-hover: var(--on-navy-body);
  --fg-footer-label: var(--on-navy-mute);
  --border: var(--rule);
  --border-soft: var(--rule-soft);
  --border-strong: var(--rule-strong);
  --background: var(--bg);
  --cream: var(--bg-cream);
  --muted: var(--ink-mute);

  /* Superseded. --gold-dark was #8A6014, which is --gold-ink; --gold-deep was
     just --gold. Both kept so existing markup keeps rendering. */
  --gold-dark: var(--gold-ink);
  --gold-deep: var(--gold);

  /* Superseded motion names. --d-slow was 0.55s, long enough that a fast
     scroller outran the reveal and read copy while it was still fading in. */
  --d-fast: var(--dur-press);
  --d-base: var(--dur-ui);
  --d-slow: var(--dur-enter);

  --tracking-eyebrow: var(--track-eyebrow);
  --tracking-tight: var(--track-h2);
  --tracking-button: var(--track-button);
}