/* rc-brand.css — rebrand foundation tokens (M5). LOCKED 2026-08-04.
   Source of truth: Figma Website Style Guide (8er74ZIVSXSuQ4j8kjPHxU, Color Palettes 3:406)
   + designer M1 answers (navy = #05264F; Figma sizes are px, transcribed 1:1 — no pt scaling).
   Charter: vault Projects/Rebrand Architecture & Conventions.md ("Token system" section).

   GATED: loads only on the rebrand env (RC_REBRAND_ENV) or with the rc_rebrand=1 cookie —
   see the topic gate in routinecos-styles.php. Public prod surfaces are untouched until
   their M6 rebuild ungates them.

   NOTE the two-palette model: --rc-scent-* below is the NEW rebrand palette, consumed only
   by rebuilt (rc-*) surfaces. The legacy --scent-X / --color-X schemes in rc-tokens.css keep
   driving un-rebuilt surfaces and MUST NOT be edited to these values.
   (NB: never write "asterisk-slash" inside a comment — it terminates it and eats the rule.) */

:root {

	/* ===================== ZOOM/SCALE DIAL ===================== */
	/* Foundation-wide multiplier that lets a surface render its type, buttons, and sized
	   elements larger without a browser-zoom hack. Default 1 → every token below computes to
	   its exact locked Figma value, so un-opted surfaces are byte-for-byte unchanged.
	   A surface opts in by overriding --rc-scale ON :root (gated to that surface with :has), e.g.
	   `@media (min-width:1200px){ :root:has(.rc-home){ --rc-scale: 1.25; } }` (business asked the
	   desktop homepage to read like 125% zoom, 2026-08-11).
	   ⚠️ Must be overridden on :root, not on the surface element: these tokens are DECLARED on
	   :root, so their var(--rc-scale) resolves against :root's value. Overriding --rc-scale on a
	   descendant (e.g. .rc-home) scales only rules that use var(--rc-scale) directly at the
	   element (rc-buttons box metrics, per-surface fixed px), NOT these :root-declared type tokens.
	   Consumers: the type ramp below, rc-buttons.css box metrics, per-surface fixed px. */
	--rc-scale: 1;

	/* ===================== BRAND PALETTE ===================== */
	--rc-navy: #05264F;        /* "Dark Blue" — THE brand navy (#19294D + logo #14284e rejected) */
	--rc-light-blue: #D7F9FB;
	--rc-white: #FFFFFF;
	--rc-lilac: #E7ECFF;       /* secondary — neutral backgrounds */
	--rc-red: #EF4036;         /* accent */

	/* ===================== TYPE — Jost, sizes px 1:1 from Figma ===================== */
	--rc-font: 'Jost', sans-serif;
	--rc-weight-regular: 400;
	--rc-weight-medium: 500;
	--rc-weight-semibold: 600;
	--rc-weight-bold: 700;

	/* style: weight in trailing comment; tracking tokens only where non-zero.
	   Sizes + line-heights carry the * --rc-scale dial (default 1 → exact Figma px);
	   tracking stays in em so it scales with font-size on its own. */
	--rc-text-teaser-size: calc(11px * var(--rc-scale));   --rc-text-teaser-lh: calc(14px * var(--rc-scale));   --rc-text-teaser-track: .03em;  /* 600, uppercase; also CTA labels */
	--rc-text-menu-size: calc(12px * var(--rc-scale));     --rc-text-menu-lh: calc(14px * var(--rc-scale));     --rc-text-menu-track: .04em;    /* 500 primary nav / 400 secondary nav */
	--rc-text-h1-size: calc(30px * var(--rc-scale));       --rc-text-h1-lh: calc(33px * var(--rc-scale));       /* 500 — NB: guide h1 < h2; bind to .rc-h1 class, never bare h1 tag */
	--rc-text-h2-size: calc(32px * var(--rc-scale));       --rc-text-h2-lh: calc(38px * var(--rc-scale));       /* 500 */
	--rc-text-h3-size: calc(22px * var(--rc-scale));       --rc-text-h3-lh: calc(28px * var(--rc-scale));       /* 500 */
	--rc-text-sub-size: calc(20px * var(--rc-scale));      --rc-text-sub-lh: calc(24px * var(--rc-scale));      /* 400 */
	--rc-text-product-size: calc(16px * var(--rc-scale));  --rc-text-product-lh: calc(22px * var(--rc-scale));  /* 500 — product title AND price */
	--rc-text-body-size: calc(13px * var(--rc-scale));     --rc-text-body-lh: calc(18px * var(--rc-scale));     /* 400 */
	--rc-text-signoff-size: calc(10px * var(--rc-scale));  --rc-text-signoff-lh: calc(14px * var(--rc-scale));  --rc-text-signoff-track: .04em; /* 400 */
	--rc-text-footnote-size: calc(8px * var(--rc-scale));  --rc-text-footnote-lh: calc(12px * var(--rc-scale)); /* 400 */

	/* ===================== BUTTONS — CTA component sets ===================== */
	/* Fluid/min-width (NOT the comp's fixed 192px), square corners, uppercase teaser-style label.
	   Active 4px border renders as inset box-shadow so state changes cause no layout shift. */
	--rc-btn-red: var(--rc-red);
	--rc-btn-red-hover: #FF0E00;
	--rc-btn-active-border: #FF867F;
	--rc-btn-inactive: #898787;

	/* ===================== REBRAND SCENT PALETTES ===================== */
	/* primary = headline/button color, -bg = section/background tint.
	   Slugs mirror the legacy .category-* class names (see rc-tokens.css). */
	--rc-scent-rose-hips: #A0237E;              --rc-scent-rose-hips-bg: #EFB9E0;
	--rc-scent-coconut-vanilla: #BB4B27;        --rc-scent-coconut-vanilla-bg: #F3CEB2;
	--rc-scent-unscented: #063661;              --rc-scent-unscented-bg: #92D5EB;
	--rc-scent-cucumber: #3D9532;               --rc-scent-cucumber-bg: #C0DE88;
	--rc-scent-jasmine-orange-blossom: #EF3623; --rc-scent-jasmine-orange-blossom-bg: #FABC9E;
	--rc-scent-lavender-cedar: #5F3AAE;         --rc-scent-lavender-cedar-bg: #DCCCE4;
	--rc-scent-vanilla-cashmere-oak: #95785D;   --rc-scent-vanilla-cashmere-oak-bg: #E0D0A6;

	/* Fall 2026 limited editions. Source: "Routine's Pantone Colors - As of Aug 13, 2026",
	   DIGITAL HEX COLORS columns (primary -> token, secondary -> -bg). The colour sheet names
	   the third one "Honey Blossom & French Vanilla" while the product mapping sheet says
	   "Wild Honey & French Vanilla" — the slug follows the product sheet, which is what the
	   variations and SKUs (SHP-WHV-*) use. */
	--rc-scent-mandarin-blossom-neroli: #E74C39;  --rc-scent-mandarin-blossom-neroli-bg: #F6BFAB;
	--rc-scent-crushed-coconut-jasmine: #884933;  --rc-scent-crushed-coconut-jasmine-bg: #EACCA5;
	--rc-scent-wild-honey-french-vanilla: #F18A00; --rc-scent-wild-honey-french-vanilla-bg: #F6E0A4;

	/* Added 2026-09-23. Same sheet, same columns. Warm Vanilla & Hazelnut is a Fall 2026
	   limited edition; Basil & Avocado is a returning scent whose rebrand pair (PT 370 C /
	   PT 2298 C) is a GREEN, not the brown #905E42 the legacy --scent-basil-avocado still
	   carries in rc-tokens.css. Both palettes are live at once: the legacy travel-size
	   tiles keep the brown, the rebrand grid takes the green. */
	--rc-scent-basil-avocado: #658D1B;            --rc-scent-basil-avocado-bg: #B7DB57;
	--rc-scent-warm-vanilla-hazelnut: #D75F00;    --rc-scent-warm-vanilla-hazelnut-bg: #F5C9AB;

	/* TODO (designer, tracked in vault Projects/Rebrand Inventory — Scent Colors.md):
	   --rc-scent-purple-shampoo-conditioner    (live core product, no Figma palette yet)
	   Spring 2026: magnolia-fresh-rain · white-lily-gardenia · berry-bloom-citrus
	   Summer 2026: citrus-grapefruit-blossom · fresh-linen-summer-rose · pink-pineapple-coconut */
}

/* Desktop zoom, SITE-WIDE (business ask 2026-08-11, extended site-wide 2026-08-18): make the
   whole desktop rebrand read like 125% browser zoom at >=1200px. Lives HERE — rc-brand.css loads
   on every rebrand surface — rather than in rc-home.css (front-page-only), so the shared
   header/footer shell (and token type) scales on the PDP / 404 / content pages too, not just the
   homepage. Must be set on :root (the type tokens above resolve var(--rc-scale) against :root).
   Small laptops / mobile (<1200px) stay 1.0x. Per-surface fixed-px overrides that must move with
   the dial live in each surface's own sheet (e.g. rc-home.css grid/media overrides). */
@media (min-width: 1200px) {
	:root { --rc-scale: 1.25; }
}

/* ===================== TYPOGRAPHY CLASSES ===================== */
/* Bind the type-ramp tokens to reusable classes. Decouples semantic tags from the
   visual ramp (guide has h1 < h2, so a real <h1> must NOT inherit the bare-tag size).
   Home-surface headings are styled by their own scoped rc-home.css selectors; these
   generic classes are for shared shell surfaces (404, content pages) — apply .rc-h1
   to whatever element is the visual H1, never rely on the bare <h1> UA size. */
.rc-h1 {
	font-family: var(--rc-font);
	font-weight: var(--rc-weight-medium);
	font-size: var(--rc-text-h1-size);
	line-height: var(--rc-text-h1-lh);
}


/* ===================== iOS ZOOM — 2026-09-27 =====================
 * "Let's remove any iOS zoom." Two separate iOS behaviours, both measured on the live rebrand
 * site at 390 with an iPhone UA, and both fixed at their own cause.
 *
 * 1. DOUBLE-TAP ZOOM on controls. Safari arms a double-tap-to-zoom gesture on anything with
 *    `touch-action: auto`, and a stepper is the one control people genuinely do tap twice in
 *    quick succession. The gallery controls were fixed in Round 6 #1; the quantity stepper had
 *    the same `auto` and is fixed here.
 *
 *    `manipulation` keeps panning and PINCH zoom — a shopper who wants to zoom still can, and
 *    accessibility zoom is untouched — and drops only the double-tap gesture. It also removes
 *    Safari's ~300ms click delay, so the stepper feels faster.
 *
 * 2. ZOOM ON FOCUS. iOS Safari zooms the viewport whenever a focused text field computes under
 *    16px, and then leaves the page scaled. Audited: 11 fields on checkout (the whole shipping
 *    block, email, password, and both selects) and 4 on the PDP review form, all at 14px.
 *
 *    16px is the threshold, not a preference — 15.5px still zooms. Mobile only, so the desktop
 *    type scale is untouched, and limited to the input types that actually take text: checkbox,
 *    radio, button and submit never zoom and keep their own sizing.
 */
.qty-enhanced-btn.qty-enhanced-btn,
.qty-enhanced-value.qty-enhanced-value {
	touch-action: manipulation;
}

/* Scoped by INPUT DEVICE, not width. `hover: none` + `pointer: coarse` is every touch device and
   no mouse-driven one, so a desktop browser at any width keeps the 14px form type exactly as it
   is, while an iPad — which zooms just like an iPhone and can be 1024 wide — is covered. A
   max-width query would have missed the iPad and caught narrow desktop windows that do not zoom.

   !important because the theme's checkout selectors (`.woocommerce form .form-row input.input-text`
   and friends) outrank a plain element selector AND its sheet loads after this one — measured:
   without it the rule lost and all 11 checkout fields stayed at 14px. */
@media (hover: none) and (pointer: coarse) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="number"],
	input[type="password"],
	input[type="search"],
	input:not([type]),
	select,
	textarea {
		font-size: 16px !important;
	}

	/* One rule still outranked the block above — found by reading Chrome's matched styles, not by
	   guessing. It carries !important AND more specificity, so it needs naming:

	     body.RO84-mixed .RO84--step-block .form-row…  font-size: 14px !important
	       — the theme's checkout step blocks, including the login form it injects.

	   `shipping_state` also read as 14px but is `display: none` — select2 replaces it, so it can
	   never be focused and cannot trigger the zoom. Left alone.

	   The PDP review form is handled in rc-pdp-rebrand.css instead: its rule has the SAME
	   specificity as anything this sheet can write, and that sheet loads after this one, so an
	   override here loses on order no matter how it is spelt. */
	body.RO84-mixed .RO84--step-block .form-row input.input-text,
	body.RO84-mixed .RO84--step-block .form-row input[type="email"],
	body.RO84-mixed .RO84--step-block .form-row input[type="password"],
	body.RO84-mixed .RO84--step-block .form-row select,
	body.RO84-mixed .RO84--step-block .form-row.woocommerce-invalid input.input-text {
		font-size: 16px !important;
	}
}