/**
 * Design tokens.
 *
 * The single place any colour, type step or rhythm value is defined. Sections
 * reference tokens and never hard-code a hex value, so a palette change is made
 * here once and reaches every section.
 *
 * Palette is black / gold / red, as specified. Red is reserved for buttons and
 * interactive states - headings never carry it.
 */

:root {

	/* ---------------------------------------------------------------
	 * Colour
	 * --------------------------------------------------------------- */

	--mq-black:      #000000;   /* primary dark ground                     */
	--mq-ink:        #0B0B0B;   /* dark ground that is not pure black      */
	--mq-band:       #1A1A1A;   /* the dark contrast band between sections */
	--mq-grey:       #333333;   /* muted body text on light                */
	--mq-grey-soft:  #6B6B6B;   /* captions, meta                          */

	--mq-gold:       #D4AF37;   /* accent, hairlines, eyebrows on dark     */
	--mq-gold-deep:  #A17C1A;   /* gold text on white - 4.6:1, passes AA   */
	--mq-gold-dim:   rgba(212, 175, 55, 0.34);

	--mq-red:        #BC0000;   /* primary CTA - sampled from the logo     */
	--mq-red-light:  #D31717;   /* hover                                   */
	--mq-red-deep:   #8A0000;   /* pressed                                 */

	--mq-white:      #FFFFFF;
	--mq-cream:      #FAF8F4;   /* warm off-white, the light ground        */
	--mq-off:        #F5F5F5;   /* alternating light band                  */

	/* Hairlines. Two, because a rule on black and a rule on cream cannot
	   be the same value and still read as the same weight. */
	--mq-line-dark:  rgba(255, 255, 255, 0.16);
	--mq-line-light: rgba(0, 0, 0, 0.12);

	/* Scrims over photography. Heroes carry text, so they need the deeper
	   one; decorative images take the light one. */
	--mq-scrim:      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 38%, rgba(0,0,0,0.72) 100%);
	--mq-scrim-soft: linear-gradient(180deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.68) 100%);

	/* ---------------------------------------------------------------
	 * Type
	 * --------------------------------------------------------------- */

	--mq-display: "Cormorant Infant", "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Poppins, not the Montserrat named in the brief - see the note on the
	   font request in functions.php. Change both places together. */
	--mq-body:    "Poppins", "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* Modular scale, in px, as specified. */
	--mq-fs-12: 12px;
	--mq-fs-13: 13px;
	--mq-fs-14: 14px;
	--mq-fs-15: 15px;
	--mq-fs-17: 17px;   /* body */
	--mq-fs-19: 19px;
	--mq-fs-23: 23px;
	--mq-fs-29: 29px;
	--mq-fs-37: 37px;
	--mq-fs-49: 49px;
	--mq-fs-65: 65px;
	--mq-fs-85: 85px;

	/* Fluid display steps. Each clamps between two steps of the scale so a
	   heading never outgrows a phone or under-fills a desktop. */
	--mq-h1: clamp(37px, 5.4vw, 72px);
	--mq-h2: clamp(29px, 3.6vw, 49px);
	--mq-h3: clamp(23px, 2.2vw, 29px);
	--mq-h4: clamp(19px, 1.5vw, 23px);

	--mq-lead: clamp(16px, 1.05vw, 19px);

	/* Letterspacing. The reference designs lean on wide tracking for small
	   uppercase labels and light positive tracking on display serifs. */
	--mq-track-eyebrow: 0.24em;
	--mq-track-btn:     0.16em;
	--mq-track-display: 0.02em;

	/* ---------------------------------------------------------------
	 * Rhythm and layout
	 * --------------------------------------------------------------- */

	/* Vertical padding clamps on vh, not vw, so a wide-but-short laptop does
	   not get desktop-sized gaps it has no height for. */
	/* Generous. The reference sites give a section two to three times the air
	   a normal marketing page would, and that space is most of what makes them
	   read as expensive. */
	--mq-pad-section: clamp(74px, 14vh, 168px);
	--mq-pad-tight:   clamp(48px, 8vh, 96px);

	--mq-gap:      clamp(16px, 2vw, 28px);
	--mq-gap-lg:   clamp(28px, 3.4vw, 56px);

	--mq-gutter:   clamp(20px, 5vw, 56px);   /* page side padding */
	--mq-max:      1320px;                   /* standard content width */
	--mq-max-wide: 1560px;                   /* mosaics and image bands */
	--mq-max-read: 760px;                    /* centred prose measure  */

	/* ---------------------------------------------------------------
	 * Motion and depth
	 * --------------------------------------------------------------- */

	--mq-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
	--mq-dur:    0.42s;
	--mq-dur-sm: 0.22s;

	--mq-shadow:    0 18px 48px rgba(0, 0, 0, 0.18);
	--mq-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.32);

	--mq-header-h: 162px;   /* bar (118) + nav row (44) */

	/*
	 * The masthead's height once it has shrunk - bar (76) + nav row (42).
	 *
	 * The masthead is position:fixed and never goes away, so anything scrolled
	 * under it loses this much off its top. A section that has to be readable
	 * in one screen is therefore 100svh MINUS this, not 100svh: at the full
	 * viewport height its first 118px sit behind the bar and its last 118px
	 * fall below the fold, and it can never be seen whole.
	 *
	 * Kept next to --mq-header-h because the two have to move together - both
	 * are read off .mq-masthead__bar and .mq-masthead__nav in header.css, and
	 * changing one of those without changing these is how the arithmetic
	 * silently goes wrong.
	 */
	--mq-header-stuck: 118px;
}

@media (max-width: 1024px) {
	:root {
		--mq-header-h: 78px;        /* bar only - the nav becomes the drawer */
		--mq-header-stuck: 72px;    /* the shrunk bar, and there is no nav row */
	}
}

/* Anyone who has asked their OS to stop animating gets a static site. */
@media (prefers-reduced-motion: reduce) {
	:root { --mq-dur: 0.001s; --mq-dur-sm: 0.001s; }
}