/*
 * Design tokens — the single place to change colours, fonts and spacing.
 *
 * The colours are sampled from the reference screenshots rather than guessed:
 * the announcement bar's navy, the charcoal of the cart button and the red of
 * Sale/Clearance are the measured values.
 */
:root {
	/* Brand.
	   Navy is the only strong colour in the palette; it carries the
	   announcement bar and nothing else, which is what makes it read as an
	   announcement. Everything structural is ink on white. */
	--color-navy: #223758;
	--color-navy-dark: #1a2b46;
	--color-ink: #231f20;          /* the wordmark and the category row */
	--color-text: #231f20;
	--color-text-muted: #5f5f5f;   /* the utility row */
	--color-accent: #d51631;       /* Sale, Clearance */
	--color-link: #3c5a8a;         /* in-copy links, a muted relative of the navy */
	--color-charcoal: #3a3a3a;     /* solid buttons */
	--color-bg: #ffffff;
	--color-white: #ffffff;
	--color-surface: #ededed;      /* the drawer's rows and search well */
	--color-border: #dadada;
	--color-border-light: #e8e8e8;

	/* Type.
	 *
	 * Roman capitals for the wordmark, because the lockup is set in caps and a
	 * Trajan-descended face is what gives it the engraved look. A geometric
	 * sans everywhere else: the design's navigation is wide-tracked uppercase,
	 * which only reads well on near-circular letterforms.
	 *
	 * The real store licenses Poynter Oldstyle Display for the wordmark and
	 * Mr Eaves XL Modern for everything else. Both are named first so that
	 * self-hosting them later is a matter of dropping in @font-face rules —
	 * no selector anywhere has to change. Until then the free faces after
	 * them do the work: Cinzel for the engraved Roman capitals of the
	 * wordmark, Jost for the wide-tracked uppercase navigation.
	 */
	--font-display: 'PoynterOldstyleDisplay', 'Poynter Oldstyle Display', 'Cinzel', 'Cormorant Garamond', 'Times New Roman', serif;
	--font-body: 'MrEavesXLModOT', 'Mr Eaves XL Modern', 'Jost', 'Futura', 'Century Gothic', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* The hand for "Signature" and "Signature Exclusive" — the only script in
	   the design, and the only thing it is ever used for. */
	--font-script: 'Pinyon Script', 'Parisienne', 'Snell Roundhand', 'Apple Chancery', cursive;

	/* Layout */
	--container-max: 1440px;
	--container-pad: 24px;

	/* Announcement bar */
	--topbar-bg: var(--color-navy);
	--topbar-text: #dfe5ee;
	--topbar-height: 38px;

	/* Header */
	--header-bg: var(--color-white);
	--header-brand-height: 96px;   /* the wordmark row */
	--header-row-height: 46px;     /* each nav row */
	--header-icon: var(--color-ink);
	--header-icon-size: 21px;
	--header-icon-gap: 26px;
	--wordmark-size: 34px;
	--wordmark-sub-size: 12px;
	--wordmark-rule: #2e2e2e;      /* the hairlines above and below PROVINCIAL */

	/* Navigation */
	--nav-utility-size: 12px;
	--nav-utility-track: 0.08em;
	--nav-category-size: 13px;
	--nav-category-track: 0.06em;
	--nav-gap: 34px;

	/* Cart panel */
	--cart-panel-width: 400px;
	--cart-panel-border: var(--color-ink);
	--cart-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);

	/* Mobile drawer */
	--drawer-width: 87vw;
	--drawer-max-width: 400px;
	--drawer-row-height: 55px;

	/* Type scale.
	   A homewares catalogue is browsed, not read: headings stay close to body
	   size and let the serif wordmark be the only loud thing on the page. */
	--fs-page-title: clamp(24px, 2.4vw, 34px);
	--fs-section: clamp(18px, 1.8vw, 24px);
	--fs-subsection: 17px;
	--fs-body: 15px;

	/* Page titles */
	--page-title-gap: 44px;

	/* Footer. Sampled from the design: the light band is the same grey as the
	   drawer's rows, the legal bar a mid grey with white type. */
	--footer-bg: var(--color-surface);
	--footer-text: var(--color-ink);
	--footer-bar-bg: #878787;
	--footer-bar-text: var(--color-white);
	--footer-social-bg: #868686;

	/* Home hero. The slides are pre-composed artwork, so the band's height
	   follows the artwork rather than a chosen number — landscape 3000x942 on
	   a wide screen, portrait 658x829 on a narrow one. Both live here because
	   the <source media> in the template switches at the same 900px. */
	--hero-ratio: 3000 / 942;
	--hero-ratio-mobile: 658 / 829;
	/* How long a slide takes to move, in milliseconds. home.js reads it. */
	--hero-transition: 720ms;
}

@media (max-width: 899px) {
	:root {
		--container-pad: 16px;
		--header-brand-height: 62px;
		/*
		 * Fluid, because the wordmark cannot wrap: the header is one row of
		 * fixed-width icons either side of it, so at 320-360px a fixed size
		 * pushed the row wider than the screen and the whole page scrolled
		 * sideways. Scaling it is what the design does on a phone anyway —
		 * the wordmark is about a third of the width there.
		 */
		--wordmark-size: clamp(15px, 6.1vw, 25px);
		--wordmark-sub-size: clamp(7px, 2.3vw, 9px);
		--header-icon-gap: clamp(10px, 4vw, 18px);
		--header-icon-size: clamp(17px, 5.4vw, 21px);
	}
}

/* Narrowest phones: claw back the last few pixels from the gutters. */
@media (max-width: 379px) {
	:root {
		--container-pad: 12px;
	}
}