/*
 * Theme custom properties – the template's; a clone's own arrive as uploads/landing/branding.css (inc/frame.php), which restates them.
 *
 * The look follows Howe Green House's visit page (visit.howegreenhouse.org):
 * a white page, light grey copy, headings and buttons in the school's accent,
 * and the school's main colour as a solid panel beside a photo (Image with
 * Form) or a translucent one over it (Image with Text).
 *
 * 1. Palette – the school's colours, the only hex values in the theme's CSS.
 * 2. Roles – what each part of the page paints with, pointed at the palette.
 *    Every other stylesheet reads a role, never a palette name, so a school
 *    whose scheme differs (light text on a dark page, a second accent) is
 *    restyled here and nowhere else. The layout stays the same.
 * 3. Text tokens – one font shorthand per text style, named for the style.
 *    letter-spacing cannot ride in the font shorthand, so the button's
 *    tracking sits on its class.
 */
:root {
	/* 1. Palette */
	--gold: #d4a504;
	--navy: #13264d;
	--red: #8d1821;
	--white: #ffffff;
	--black: #000000;
	--charcoal: #58595b;
	--grey: #d9d9d9;
	--taupe: #d8d1c3;

	/* 2. Roles */
	--landing-page-bg: var(--white);           /* the page */
	--landing-text: var(--charcoal);           /* body copy, quotes and their attributions, the fill behind media */
	--landing-heading: var(--red);             /* h1, h2, section titles */
	--landing-subheading: var(--red);          /* h3–h6, captions */
	--landing-link: var(--red);                /* inline links */
	--landing-accent: var(--gold);             /* list bullets, the Gold Table header */
	--landing-accent-strong: var(--red);       /* the Red Table header */
	--landing-on-accent: var(--white);         /* text on an accent fill */
	--landing-muted: var(--grey);              /* hairlines */
	--landing-button-bg: var(--red);           /* buttons – fill and border */
	--landing-button-text: var(--white);       /* button labels */
	--landing-button-hover-bg: var(--navy);    /* a button under the pointer */
	--landing-panel-bg: var(--navy);           /* Image with Form's panel; Image with Text's, at 80% over the photo; gallery arrows */
	--landing-panel-text: var(--white);        /* copy, headings, labels and outlined buttons on a panel */
	--landing-field-bg: var(--white);          /* form fields on the panel */
	--landing-field-text: var(--navy);
	--landing-field-border: var(--taupe);
	--landing-header-bg: var(--navy);          /* the header bar and the phone menu panel */
	--landing-header-text: var(--white);       /* its menu, button and the site name; the logo must read on it */
	--landing-footer-bg: var(--navy);          /* the footer */
	--landing-footer-text: var(--white);

	/* 3. Text tokens – [style] weight size/line-height family */
	--text-body: 300 18px/1.45 "Univers 45 Light", sans-serif;     /* Body copy */
	--text-caption: 300 15px/1.45 "Univers 45 Light", sans-serif;  /* Captions, quote attributions */
	--text-button: 300 16px/1.4 "Univers 45 Light", sans-serif;    /* Buttons (uppercase, tracking 0.09em) */
	--text-quote: 300 22px/1.45 "Univers 45 Light", sans-serif;    /* Quotes */
	--text-h1: 400 48px/1.1 "Univers LT Std", sans-serif;          /* Heading 1 */
	--text-h2: 400 40px/1.1 "Univers LT Std", sans-serif;          /* Heading 2, section titles */
	--text-h3: 400 22px/1.3 "Univers LT Std", sans-serif;          /* Heading 3 */
	--text-h4: 400 19px/1.35 "Univers LT Std", sans-serif;         /* Heading 4, table headers */
	--text-h5: 700 16px/1.4 "Univers LT Std", sans-serif;          /* Heading 5 */
	--text-h6: 700 14px/1.4 "Univers LT Std", sans-serif;          /* Heading 6 */
}