/* ==========================================================================
   DESIGN TOKENS - the single source of truth

   Every colour, typeface and measurement the design uses is defined once,
   here. Change a brand colour in this file and it changes everywhere: the
   header, the home page sections, the hero and the footer all read these.

   This file is loaded first on the front end and is also registered as an
   editor stylesheet, so the editor shows the same values as the live site.
   The palette is mirrored in theme.json, which is what puts the colours in
   the editor's colour picker; keep the two in step if you add a colour.

   The one deliberate exception is .masm-pathway in pathway.css, which
   re-declares some of these inside its own scope so the pathway ring can be
   themed independently of the rest of the page.
   ========================================================================== */

:root {
	/* ---- colour ---- */
	--masm-paper: #F7F0E0;
	--masm-paper-deep: #EFE5D0;
	--masm-surface: #FDFAF2;
	--masm-ink: #11294B;
	--masm-ink-soft: #3B4E6E;
	--masm-ink-faint: #5F6779;
	--masm-rule: #D8CDB6;
	--masm-ochre: #DFA426;
	--masm-rust: #B66B28;
	--masm-rust-ink: #94551F;

	/* ---- type ---- */
	--masm-serif: "Newsreader", "Iowan Old Style", "Source Serif 4", Georgia, serif;
	--masm-sans: "Karla", "Helvetica Neue", Arial, sans-serif;
	--masm-stamp: "Oswald", "Karla", sans-serif;

	/* ---- measure ----
	   --masm-max is the width of the content column and --masm-gut the space
	   either side of it. Every full-width row on the page is centred to these
	   two values, so changing them re-aligns the whole site at once. */
	--masm-gut: clamp(20px, 5vw, 80px);
	--masm-max: 1240px;

	/* ---- hero ----
	   The wash drawn over the collage so the headline stays readable. */
	--masm-hero-scrim: linear-gradient(100deg, rgba(247, 240, 224, .97) 0%, rgba(247, 240, 224, .92) 34%, rgba(247, 240, 224, .4) 52%, rgba(247, 240, 224, 0) 66%);
}
/* --------------------------------------------------------------------------
   Short aliases for the inner-page stylesheet

   assets/css/inner.css is ported from the approved prototype, where the tokens
   have short names. Mapping them here let that CSS come across unchanged, so it
   can still be diffed against the prototype it came from. New CSS should use
   the --masm-* names above.

   The six accent hues are the chapter colours: a section picks one with
   .is-chapter-ochre / -rust / -sage / -orchid / -sky / -coral (sections.css),
   which sets --c and --c-ink for everything inside it.
   -------------------------------------------------------------------------- */
:root {
	--paper: var(--masm-paper);
	--paper-deep: var(--masm-paper-deep);
	--surface: var(--masm-surface);
	--ink: var(--masm-ink);
	--ink-soft: var(--masm-ink-soft);
	--ink-faint: var(--masm-ink-faint);
	--rule: var(--masm-rule);
	--ochre: var(--masm-ochre);
	--rust: var(--masm-rust);
	--rust-ink: var(--masm-rust-ink);
	--serif: var(--masm-serif);
	--sans: var(--masm-sans);
	--stamp: var(--masm-stamp);
	--gut: var(--masm-gut);
	--max: var(--masm-max);

	/* the remaining accent hues, same values as the .is-chapter-* rules */
	--coral: #E4633F;
	--sage: #8C946E;
	--orchid: #C766A8;
	--sky: #6CA1CC;
	--ochre-ink: #7A5810;
	--coral-ink: #A33A1C;
	--sage-ink: #5E663F;
	--orchid-ink: #8E3E72;
	--sky-ink: #2E6086;
}