/*
 * Design tokens. The single place every value lives.
 *
 * Measured from the twelve approved mockups in assets/01-page-mockups, not
 * invented and not rounded. Where a number here looks oddly specific, it is
 * because the mockup says so. See PROJECT-BRIEF.md section 6.
 *
 * Rule for this file: nothing outside it may contain a raw colour, a font stack,
 * or a spacing figure. If you find yourself typing #1F3A2E anywhere else, stop.
 */

:root {
	/* ---------------------------------------------------------------- colour
	 * Eight values. There are no others. Headings are ink, never forest:
	 * forest is chrome and buttons. Brass should appear about as often as
	 * forest, and if it does not, the balance is wrong.
	 */
	--fms-forest: #1F3A2E;
	--fms-brass: #A8823F;
	--fms-cream: #F7F4ED;
	--fms-white: #FFFFFF;
	--fms-ink: #232520;
	--fms-muted: #6B6B60;
	--fms-border: #E4DFD4;
	--fms-sage: #E8EAE0;

	/* Alpha variants, exactly the fourteen the mockups use. Every one is a
	 * palette colour with transparency, never a new hue. */
	--fms-white-85: rgba(255, 255, 255, 0.85);
	--fms-white-65: rgba(255, 255, 255, 0.65);
	--fms-white-40: rgba(255, 255, 255, 0.4);
	--fms-white-18: rgba(255, 255, 255, 0.18);
	--fms-white-15: rgba(255, 255, 255, 0.15);
	--fms-cream-82: rgba(247, 244, 237, 0.82);
	--fms-cream-80: rgba(247, 244, 237, 0.8);
	--fms-cream-78: rgba(247, 244, 237, 0.78);
	--fms-cream-72: rgba(247, 244, 237, 0.72);
	--fms-cream-22: rgba(247, 244, 237, 0.22);
	--fms-cream-18: rgba(247, 244, 237, 0.18);
	--fms-ink-14: rgba(35, 37, 32, 0.14);
	/*
	 * The press-down overlay for solid buttons. Ink was tried first and does
	 * not work: it is almost the same darkness as forest, so the hover moved
	 * rgb(31,58,46) to rgb(32,55,44), which nobody can see. This is a shade of
	 * the same colours rather than a new one, so the palette rule holds.
	 */
	--fms-shade-22: rgba(0, 0, 0, 0.22);
	--fms-ink-10: rgba(35, 37, 32, 0.1);
	--fms-ink-05: rgba(35, 37, 32, 0.05);

	/* The only three shadows in the design. */
	--fms-shadow-card: 0 2px 10px var(--fms-ink-05);
	--fms-shadow-card-hover: 0 12px 30px var(--fms-ink-10);
	--fms-shadow-panel: 0 8px 28px var(--fms-ink-14);

	/* ------------------------------------------------------------ typography
	 * Self hosted, extracted from the mockup bundles. See assets/css/fonts.css.
	 * The generic keyword is the only fallback the mockups declare, so it is the
	 * only fallback here: substituting a system stack would change the design on
	 * any machine where the webfont is slow.
	 */
	--fms-font-heading: 'Fraunces', serif;
	--fms-font-body: 'Poppins', sans-serif;

	--fms-weight-light: 300;
	--fms-weight-regular: 400;
	--fms-weight-medium: 500;
	--fms-weight-semibold: 600;
	--fms-weight-bold: 700;

	/* Desktop type scale. Half pixels are deliberate, they are in the mockups. */
	--fms-size-hero: 52px;
	--fms-size-h1: 44px;
	--fms-size-h2: 34px;
	--fms-size-h3: 26px;
	--fms-size-h4: 22px;
	--fms-size-lead: 16.5px;
	--fms-size-body: 15px;
	--fms-size-article: 17px;
	--fms-size-meta: 14px;
	--fms-size-small: 13px;
	--fms-size-eyebrow: 11px;
	--fms-size-nav: 15px;

	/* Mobile type scale, from the 390px artboards. */
	--fms-size-hero-m: 31px;
	--fms-size-h1-m: 30px;
	--fms-size-h2-m: 27px;
	--fms-size-h3-m: 21px;
	--fms-size-h4-m: 18px;
	--fms-size-lead-m: 16px;
	--fms-size-body-m: 14.5px;
	--fms-size-meta-m: 13px;
	--fms-size-eyebrow-m: 10px;

	--fms-leading-heading: 1.2;
	--fms-leading-lead: 1.55;
	--fms-leading-body: 1.7;
	--fms-leading-list: 2.1;
	--fms-leading-tight: 1.25;

	/* --------------------------------------------------------------- layout
	 * The container is 1320px inside a 1440px artboard, so 60px gutters. On
	 * mobile each band carries its own 24px padding and the content is 342px.
	 */
	--fms-container: 1320px;
	--fms-gutter: 24px;
	--fms-measure: 770px;

	/* Section rhythm. Bands abut directly: there is NO margin between them.
	 * The 176px gap between content edges is 88 bottom plus 88 top. Adding a
	 * margin on top of this produces 352px and is wrong. */
	--fms-band-y: 88px;
	--fms-band-y-m: 52px;
	--fms-band-x-m: 24px;

	--fms-gap-card: 24px;
	--fms-gap-card-m: 16px;
	--fms-gap-sidebar: 40px;
	--fms-gap-footer: 48px;
	--fms-gap-product: 72px;
	--fms-gap-editorial: 80px;

	/* Fixed chrome heights, from the mockups. */
	--fms-announcement-h: 40px;
	--fms-nav-h: 50px;
	/*
	 * One field height for the checkout. A text input reaches 51px from its own
	 * padding and line box; a select does not, because CheckoutWC pads it
	 * asymmetrically to make room for the floating label, so it landed at 47
	 * and sat 4px short of the field beside it. Both are pinned to this.
	 */
	--fms-field-h: 51px;
	--fms-header-y: 24px;
	--fms-sidebar-w: 300px;

	/* ---------------------------------------------------------------- shape */
	--fms-radius-pill: 32px;
	--fms-radius-card: 14px;
	--fms-radius-input: 32px;
	--fms-radius-chip: 20px;

	/* ------------------------------------------------------- interaction
	 * None of this is in the mockups. The mockups even set
	 * `input:focus { outline: none }` with no replacement, which on its own
	 * fails the accessibility target. Decided by us, inside the palette.
	 * See DECISIONS.md D21.
	 */
	--fms-focus-ring: 2px solid var(--fms-brass);
	--fms-focus-offset: 2px;
	--fms-tap-min: 44px;
	--fms-transition: 180ms ease;
	--fms-transition-slow: 380ms ease;

	/* ------------------------------------------------------------ breakpoints
	 * Documented here for reference. CSS cannot use custom properties in media
	 * queries, so the same figures are written out in the media rules.
	 *   600px  mobile artboard rules apply up to here
	 *   900px  card grids drop to two columns, filter sidebar becomes a drawer
	 *   1400px container reaches its full 1320 plus gutters
	 */
}