/*
 * 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 its serif 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.
	 *
	 * Two serif tokens, because the free stand-in cannot do both jobs.
	 * --font-display is the wordmark: Cinzel is a Trajan-descended face of
	 * Roman capitals, which is exactly right for PROVINCIAL and useless for
	 * anything else — it has no true lowercase, so "A Restful Retreat" comes
	 * out as small caps. --font-heading is every mixed-case serif on the site
	 * (section headings, page titles, product names) and uses EB Garamond,
	 * an oldstyle with proper lowercase in the same family as Poynter's.
	 */
	--font-display: 'PoynterOldstyleDisplay', 'Poynter Oldstyle Display', 'Cinzel', 'Times New Roman', serif;
	--font-heading: 'PoynterOldstyleDisplay', 'Poynter Oldstyle Display', 'EB Garamond', Georgia, '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;

	/* Catalogue. The column count is a token because the grid, the toolbar
	   and the rail all have to agree on it. */
	--shop-columns: 3;
	--related-columns: 4;
	--fs-product-title: 32px;

	/* The ring drawn around a focused form field. Its own token because the
	   checkout, the account page and the shop filters all need to agree. */
	--focus-ring: rgba(34, 55, 88, 0.3);

	/* Account page. The field width and border are measured off the
	   reference; the button is the charcoal the rest of the site uses. */
	--account-field-width: 460px;
	--account-field-border: #878787;

	/* Home sections.
	   The section heading, the tile label and the gaps between tiles are the
	   values sampled from the reference, so every section below the hero is
	   set from the same three numbers rather than each choosing its own. */
	--fs-section-title: 32px;
	--fs-tile-label: 18px;
	--section-gap: 46px;
	--tile-gap: 30px;
	--product-card-bg: #f4f4f4;
	--rail-card-width: calc((100% - 4 * var(--tile-gap)) / 5);
	/* The arrows centre on the card's photograph, not on the card — the name
	   and price below it would drag them off the image. */
	--rail-arrow-top: calc(var(--rail-card-width) / 2);

	/* 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);

		--fs-section-title: 24px;
		--fs-tile-label: 14px;
		--section-gap: 28px;
		--tile-gap: 14px;
		/* A card and a glimpse of the next, so a thumb can see there is more
		   to the right without an arrow to tell it. */
		--rail-card-width: 44vw;
		--rail-arrow-top: 22vw;

		--shop-columns: 2;
		--related-columns: 2;
		--fs-product-title: 24px;
	}
}

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