/*
 * Design tokens.
 *
 * Every value here is lifted from the approved design canvas, not invented.
 * Where the design states a number, that number is the token. Where it does
 * not (mobile behaviour, which the canvas never covered) the token is marked.
 *
 * Change a value here and it changes across the site.
 */

:root {
	/* ── Ink and text ──────────────────────────────────────────────── */
	--mc-ink: #050A13;          /* headings, dark bands, buttons          */
	--mc-text: #232323;         /* body copy                              */
	--mc-text-muted: #6B6B6B;   /* section body copy                      */
	--mc-text-soft: #4A4A4A;    /* hero intro, captions                   */
	--mc-text-faint: #5A5F66;   /* the overseas postage line              */
	--mc-text-strip: #9AA6B2;   /* the credits strip under the photos     */

	/* ── Blues and teals ───────────────────────────────────────────── */
	--mc-blue: #1E73BE;         /* Buy now, Reserve your copy             */
	--mc-blue-dark: #155A94;    /* link hover                             */
	--mc-teal: #167E93;         /* step labels, FAQ chevron               */
	--mc-teal-dark: #0E5A6B;    /* hero standfirst                        */
	--mc-teal-deep: #093642;    /* footer secondary text on the gradient  */
	--mc-cyan: #2AABC4;         /* basket badge, footer gradient end      */
	--mc-accent: #8ECEDA;       /* announce separators, CTA button        */
	--mc-accent-light: #80C9D7; /* footer gradient start                  */
	--mc-accent-dark: #63B4C4;  /* CTA button hover (not in the canvas)   */

	/* ── Surfaces ──────────────────────────────────────────────────── */
	--mc-paper: #FFFFFF;
	--mc-hero-base: #EDEFF2;    /* behind the hero photograph             */
	--mc-strip-base: #16222E;   /* behind each photo strip cell           */
	--mc-line: #E3E3E3;         /* every rule and border in the design    */
	--mc-tint: #EAF7FA;         /* pre-order notice background            */

	/* ── States (not in the canvas, needed for a real shop) ────────── */
	--mc-good: #1F7A4C;
	--mc-bad: #B32D2E;

	/* ── Type ──────────────────────────────────────────────────────── */
	--mc-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mc-font-display: 'Playfair Display', Georgia, serif;

	/* Sizes are the canvas values. The clamps only shrink them below the
	   desktop breakpoint, where the canvas has nothing to say. */
	--mc-h1: 58px;              /* hero, weight 400                       */
	--mc-h2-pitch: 36px;
	--mc-h2: 34px;              /* how it works, questions                */
	--mc-cta: 30px;             /* closing band, weight 400               */
	--mc-footer-title: 21px;
	--mc-wordmark: 22px;

	--mc-fs-standfirst: 20px;
	--mc-fs-body: 16px;
	--mc-fs-ui: 15px;
	--mc-fs-sm: 14px;
	--mc-fs-link: 14px;
	--mc-fs-xs: 13px;
	--mc-fs-label: 12px;
	--mc-fs-badge: 11px;

	--mc-lh-h1: 1.04;
	--mc-lh-h2: 1.15;
	--mc-lh-body: 1.7;
	--mc-lh-faq: 1.7;
	--mc-lh-snug: 1.45;

	--mc-track-label: 0.1em;
	--mc-track-badge: 0.12em;
	--mc-track-strip: 0.06em;

	/* ── Space ─────────────────────────────────────────────────────── */
	--mc-s-1: 4px;
	--mc-s-2: 8px;
	--mc-s-3: 12px;
	--mc-s-4: 16px;
	--mc-s-5: 24px;
	--mc-s-6: 32px;
	--mc-s-7: 48px;
	--mc-s-8: 64px;

	--mc-section-y: 88px;       /* the canvas uses 88px on every section  */
	--mc-hero-top: 84px;
	--mc-hero-bottom: 92px;

	/* ── Layout ────────────────────────────────────────────────────── */
	--mc-wrap: 1180px;
	--mc-wrap-narrow: 760px;    /* policy pages, not in the canvas        */
	--mc-gutter: 32px;
	--mc-header-h: 84px;

	--mc-hero-copy: 640px;      /* canvas says 610px; see theme.css       */
	--mc-hero-image: 400px;
	--mc-hero-gap: 64px;
	--mc-pitch-image-w: 540px;
	--mc-pitch-image-h: 372px;
	--mc-pitch-gap: 72px;
	--mc-steps-col: 430px;
	--mc-lower-gap: 80px;
	--mc-strip-h: 250px;

	/* ── Shape ─────────────────────────────────────────────────────── */
	--mc-r-sm: 4px;
	--mc-r-md: 8px;
	--mc-r-lg: 12px;            /* the pitch photograph                   */
	--mc-r-pill: 980px;

	--mc-shadow-pitch: 0 10px 26px rgba(1, 5, 12, 0.10);
	--mc-shadow-sm: 0 1px 3px rgba(5, 10, 19, 0.08);
	--mc-shadow-drawer: -12px 0 40px rgba(5, 10, 19, 0.22);

	/* ── Motion ────────────────────────────────────────────────────── */
	--mc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mc-t-fast: 140ms;
	--mc-t-base: 240ms;
	--mc-t-slow: 380ms;

	/* ── Depth ─────────────────────────────────────────────────────── */
	--mc-z-header: 100;
	--mc-z-drawer: 200;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--mc-t-fast: 1ms;
		--mc-t-base: 1ms;
		--mc-t-slow: 1ms;
	}
}