/*
 * CSS Custom Properties — Cornerstones Education Theme
 * All colours, spacing, and typography tokens live here.
 * Never use inline styles or hardcoded hex values outside this file.
 */

:root {

	/* ─── Brand Colours ─────────────────────────────────────────────── */
	--ci-color-engage:   #f99d31;   /* Engage orange    */
	--ci-color-develop:  #af4d76;   /* Develop purple   */
	--ci-color-innovate: #538da9;   /* Innovate teal    */
	--ci-color-express:  #cfd666;   /* Express green    */
	--ci-color-navy:     #1e2d3d;   /* Dark navy        */

	/* ─── Primary accent (Engage orange used for CTAs) ──────────────── */
	--ci-color-primary:  #f99d31;

	/* ─── Neutral Palette ───────────────────────────────────────────── */
	--ci-color-white:      #ffffff;
	--ci-color-off-white:  #fafafa;
	--ci-color-light-bg:   #f5f5f5;
	--ci-color-border:     #d3d3d3;
	--ci-color-text:       #1e2d3d;
	--ci-color-text-muted: #6b6b6c;

	/* ─── Typography ────────────────────────────────────────────────── */
	--ci-font-primary:   'Lato', sans-serif;
	--ci-font-secondary: 'Lato', sans-serif;

	/* ─── Text size scale ───────────────────────────────────────────────
	 * The agreed brand scale. The organising principle is READING text vs
	 * UTILITY text: reading text is read in sentences and carries a 20px
	 * base; utility text is scanned (breadcrumbs, notes, links) and sits
	 * at 16px so it stays subordinate to the copy.
	 *
	 * Buttons are the deliberate exception — they're utility by nature but
	 * sized as reading text, because a CTA reading 4px smaller than the
	 * paragraph asking you to click it looks like an afterthought.
	 *
	 * The rule, plainly: nothing below 16px anywhere; reading text never
	 * below 18px; primary body text 20px.
	 *
	 * Sizes are fixed rather than viewport-clamped — a clamp meant "32px"
	 * was only true at one particular window width.
	 *
	 * The footer was originally exempt from this scale. It is not any more:
	 * it had drifted to 12.8/14/14.8/15.2px — four sizes, three of them
	 * within 1.2px of each other, which reads as inconsistency rather than
	 * hierarchy, and all of them under the 16px floor. It now uses
	 * --ci-text-card-body for column headings and --ci-text-utility for
	 * everything readable, with legal microcopy the single exception at
	 * 14px.
	 *
	 * NOT governed by this scale: the site header/nav (agreed as already
	 * correct), H1 (keeps its fluid clamp — it's a hero display size), and
	 * icon glyph sizing.
	 */
	--ci-text-utility:      1rem;      /* 16px — breadcrumbs, notes, links          */
	--ci-text-card-body:    1.125rem;  /* 18px — card body copy                     */
	--ci-text-body:         1.25rem;   /* 20px — body copy, tags, hero leads        */
	--ci-text-button:       1.25rem;   /* 20px — button labels                      */
	--ci-text-card-heading: 1.25rem;   /* 20px — card headings                      */
	--ci-text-h3:           1.5rem;    /* 24px — sub headings                       */
	--ci-text-h2:           2rem;      /* 32px — section headings                   */

	/* ─── Navigation ────────────────────────────────────────────────── */
	--ci-nav-height:     25px;
	--ci-nav-bg:         var(--ci-color-white);
	--ci-nav-shadow:     0 10px 14px rgba(0, 0, 0, 0.01), 0 8px 16px rgba(0, 0, 0, 0.03);
	--ci-nav-breakpoint: 1089px;

	/* ─── Spacing ───────────────────────────────────────────────────── */
	--ci-size-xs:   0.25rem;
	--ci-size-sm:   0.5rem;
	--ci-size-md:   1rem;
	--ci-size-lg:   1.5rem;
	--ci-size-xl:   2rem;
	--ci-size-2xl:  3rem;

	/* ─── Section rhythm ────────────────────────────────────────────── */
	--ci-section-padding:        5rem;
	--ci-section-padding-mobile: 2rem;

}

/* ─── Mobile text scale — Option C ─────────────────────────────────────────
 * Chosen by the team from the four options previewed in August 2026. Phones
 * only: every value above is the desktop scale and is untouched by this block.
 *
 * Option C as specified:
 *
 *     utility       16px  →  16px   (unchanged — already at the floor)
 *     card body     18px  →  16px
 *     body          20px  →  17px
 *     card heading  20px  →  17px
 *     h2            32px  →  26px
 *
 * 17px is Apple's recommended body size, so the site reads like the apps
 * people use all day. It puts a line of body copy at 40 characters in the
 * live 311px column — the top of the 30-40 range recommended for reading on
 * a phone, which is the trade being made for the extra lines per screen.
 *
 * Two tokens Option C did not name, set here by the scale's own logic:
 *
 *   BUTTON follows body to 17px. The scale's rule is that buttons are sized
 *   as reading text, "because a CTA reading 4px smaller than the paragraph
 *   asking you to click it looks like an afterthought". Left at 20px it would
 *   be 3px LARGER than the paragraph, inverting the same argument. Tap target
 *   size is unaffected — that comes from the button's padding, not its type.
 *
 *   H3 goes to 21px. Desktop h3 (24px) sits between card heading and h2;
 *   21px is the geometric mean of Option C's 17 and 26, so the three steps
 *   keep even ratios (1.24x, 1.24x) instead of h3 collapsing into h2 at only
 *   2px below it.
 *
 * H1 is deliberately absent: it is a fluid clamp and already scales down on
 * its own, and the scale has never governed it. Icon glyph sizing is likewise
 * outside the scale and unchanged.
 *
 * 767px rather than 768px: 768 is iPad portrait, which is not a phone and is
 * not what the team judged. This is also the breakpoint the theme already
 * labels "Mobile".
 * ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {

	:root {
		--ci-text-utility:      1rem;        /* 16px — unchanged            */
		--ci-text-card-body:    1rem;        /* 16px — was 18px            */
		--ci-text-body:         1.0625rem;   /* 17px — was 20px            */
		--ci-text-button:       1.0625rem;   /* 17px — was 20px, see above */
		--ci-text-card-heading: 1.0625rem;   /* 17px — was 20px            */
		--ci-text-h3:           1.3125rem;   /* 21px — was 24px, see above */
		--ci-text-h2:           1.625rem;    /* 26px — was 32px            */
	}

}