/**
 * CreativeCanvas — design tokens
 *
 * Single source of truth for colour, type, spacing, layout and motion.
 * Values measured from the agency mockup in the browser (see
 * docs/design-tokens.md for the measurement record and the rationalisation
 * decisions). No component rule may introduce a magic value: if a value is
 * needed twice, it becomes a token here first.
 *
 * These are mirrored into theme.json so the block editor and WooCommerce
 * blocks offer the same palette. tokens.css and theme.json MUST stay in sync
 * — see docs/design-tokens.md.
 *
 * @package CreativeCanvas
 */

:root {
	/* ---------------------------------------------------------------------
	 * Colour
	 *
	 * PALETTE 7c — the Claude Design redesign, owner decision 2026-09-14
	 * (bead 8dt.13). Warm greys only: photographs are the only colour on the
	 * page, red exists solely for a field's error state, and one near-black
	 * "action" step means exactly one thing — pressable or selected. Values
	 * are the design's token sheet verbatim; contrast ratios noted there were
	 * measured to WCAG 2.2. The mockup-era navy accent stays gone.
	 * ------------------------------------------------------------------ */

	/* Text — the owner's Claude Design handoff, 2026-09-20 (tokens/design-tokens.css),
	 * with its cool half replaced by "Espresso" (owner, 2026-10-15, the final
	 * design; bead spo, previewed as 9ig.1): the warm half — ink, muted, ground,
	 * sand, band, hairlines, page — is the handoff's verbatim; Blue Grey, Dusty
	 * Blue, the blue-grey mist and the bundle photo's sky made way for a
	 * near-black brown and warm linens that sit with the collage hero. */
	--cc-color-ink: #302020;
	--cc-color-text: var(--cc-color-ink);
	--cc-color-muted: #5a5550;
	--cc-color-disabled: #a39a94;     /* disabled controls only — inactive UI, which WCAG exempts */
	--cc-color-action: #3e302c;       /* Espresso: buttons, links, footer, cart disc — Soft White on it 11.3:1 */
	--cc-color-action-hover: #2a201d;
	--cc-color-on-action: #f4f2ee;
	--cc-color-on-action-muted: #c9bdb6; /* secondary text on Espresso — 6.9:1 */
	--cc-color-footer-rule: #5c4c46;    /* the rule inside the Espresso footer */
	--cc-color-accent: #c9b8aa;       /* Clay — swatch rings, the coming-soon tile, dashed frames */
	--cc-color-accent-lt: #ddd1c6;     /* top stop of the coming-soon gradient */
	--cc-color-accent-soft: #e7e5e2;  /* Espresso at 10% over the ground: the secondary button's hover */
	--cc-color-mist: #ede6df;         /* warm linen, for the former blue-grey Surface Cool */
	--cc-color-sky: #efe9e0;          /* the warm bundle photo's own ground, read off its bottom edge (tools/bundle-banner.mjs prints it), so copy beside it reads as one card */

	/* Surfaces */
	--cc-color-page: #ede9e4;         /* the body behind the frame — the reference page's own ground, so the frame reads as a card (owner, 2026-09-20) */
	--cc-color-ground: #faf9f6;       /* page — one step warmer than a white tee, so the garment reads clean */
	--cc-color-surface: #ffffff;      /* inputs */
	--cc-color-sand: #f2efea;
	--cc-color-band: #e8e2da;

	/* Lines */
	--cc-color-hairline: #e5ddd8;
	--cc-color-hairline-soft: #efe9e5;
	--cc-color-error: #b4382e;        /* a field's error frame, 2px — the only red in the shop */
	--cc-color-error-text: #9e2f26;   /* the error message — 6.9:1 on ground */

	/* NO ACCENT COLOUR — user decision 2026-08-23.
	 *
	 * The palette is monochrome. The live shop has never had an accent hue:
	 * every colour variable in it is #121212, white or grey, links included.
	 * The mockup's navy was the agency's invention and is removed. Colour in
	 * this shop comes from the product photography; an accent competes with it.
	 *
	 * Consequences, all deliberate: interaction is carried by weight, fill
	 * inversion and underline rather than hue; body links are underlined
	 * always; the focus ring is currentColor, so it reads ink. Four vetted
	 * warm candidates are recorded in bead 8dt.11 if colour is ever wanted.
	 */

	/* State
	 *
	 * Declared by the agency's theme but not exercised on any mockup page.
	 * Kept because a real store needs them; treat the exact hues as
	 * provisional until a page actually uses them. */
	--cc-color-ok: #2f6b4a;           /* in stock, success */
	--cc-color-sale: #a8452c;         /* sale price, urgency */

	/* Fixed brand colour — not a theme token, do not reuse for UI. */
	--cc-color-whatsapp: #25d366;

	/* ---------------------------------------------------------------------
	 * Typography
	 *
	 * Two variable families, both SIL OFL 1.1, self-hosted as woff2 (latin +
	 * latin-ext, because Estonian straddles them: õäöü are latin, šž are
	 * latin-ext). Faces are declared in theme.json, which WordPress emits as
	 * @font-face.
	 *
	 * ARCHIVO + DM SANS — owner decision 2026-09-14, from the Claude Design
	 * redesign (bead 8dt.13). This supersedes the August choice of Fredoka +
	 * Nunito Sans, which are removed from the repo. Archivo is a grotesque
	 * set heavy and tight for headings, labels and buttons; DM Sans carries
	 * paragraphs at a generous 1.75 leading.
	 *
	 * Axis ranges below are what the shipped FILES carry, read from fvar on
	 * the exact committed copies (tools: scratchpad check, 2026-09-14):
	 *   Archivo   wght 100-900
	 *   DM Sans   wght 100-1000, opsz 9-40
	 * Declaring wider than the file gets synthesised faux weights.
	 * ------------------------------------------------------------------ */

	--cc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--cc-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cc-font-script: "Caveat", cursive;  /* one decorative line in the hero, nothing else */

	--cc-weight-regular: 400;
	--cc-weight-medium: 500;    /* Playfair headings and the wordmark; Inter buttons, card and tile titles */
	--cc-weight-semibold: 600;  /* Inter — footer column headings */
	--cc-weight-bold: 700;

	/* Type scale
	 *
	 * Rationalised from the mockup. The mockup itself has no scale: it uses
	 * ~12 one-off arbitrary rem values between 0.68 and 1.05rem. These snap
	 * every measured value to within 0.8px — imperceptible — while giving a
	 * scale a template author can actually hold in their head.
	 * The small band steps 1px at a time because that is where the mockup's
	 * real distinctions live; above body it follows the mockup's own jumps. */
	--cc-text-micro: 0.6875rem;    /* 11px — badges, uppercase eyebrow labels */
	--cc-text-caption: 0.75rem;    /* 12px — fine print, disclaimers */
	--cc-text-footnote: 0.8125rem; /* 13px — meta, product type label */
	--cc-text-small: 0.875rem;     /* 14px — secondary body, form hints */
	--cc-text-ui: 0.9375rem;       /* 15px — nav, controls, price */
	--cc-text-base: 1rem;          /* 16px — body copy, buttons, card titles */
	--cc-text-lg: 1.125rem;        /* 18px — lead paragraph, card headings */
	--cc-text-xl: 1.25rem;         /* 20px — wordmark, subsection headings */
	/* Design-scale steps, each fluid between its 360px and 1440px measurement
	 * on the redesign's token sheet ("Suurus 1440 / 360"):
	 *   block heading H3   22 / 20
	 *   section heading H2 30 / 24
	 *   page title H1      44 / 30
	 *   banner headline    52 / 31 */
	--cc-text-xxl: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem);      /* h4 tile — 22 / 17 */
	--cc-text-xxxl: clamp(1.5rem, 1.05rem + 1.4vw, 2.375rem);        /* h2 section — 38 / 24 */
	--cc-text-display-xs: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); /* = h4 */
	--cc-text-display-sm: clamp(1.1875rem, 0.85rem + 1.1vw, 1.875rem); /* h3 block — 30 / 19 */
	--cc-text-display-lg: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);       /* about heading — 32 */
	--cc-text-display-md: clamp(1.6875rem, 1.1rem + 2.35vw, 3.25rem); /* h1 hero — 52 / 27 */
	--cc-text-body: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);      /* body — 15 / 14 */

	/* Line height — the design's per-role values */
	--cc-leading-tight: 1.08;    /* h1 */
	--cc-leading-snug: 1.1;      /* h2 */
	--cc-leading-normal: 1.2;    /* h3, h4, tile labels */
	--cc-leading-body: 1.7;      /* paragraphs */
	--cc-leading-ui: 1.6;        /* body small, interface text */
	--cc-leading-caption: 1.45;  /* 13px captions */
	--cc-leading-relaxed: 1.75;  /* the about paragraph */

	/* Letter spacing
	 *
	 * ARCHIVO IS SET TIGHT, DM SANS IS NOT TOUCHED. Display sizes take
	 * -0.03em, section headings -0.025em, block headings -0.02em, card titles
	 * -0.01em; body and UI text sit at 0. Uppercase labels and buttons open
	 * up instead. The Fredoka-era +0.6px base tracking is gone with the face
	 * it was measured for. Read these off the redesign's token sheet — do not
	 * re-derive them from the mockup, whose type this no longer is. */
	--cc-tracking-base: 0;
	--cc-tracking-display: 0;   /* Playfair is never tracked in the handoff */
	--cc-tracking-heading: 0;
	--cc-tracking-subheading: 0;
	--cc-tracking-title: 0;
	--cc-tracking-button: 0;
	--cc-tracking-wide: 0;
	--cc-tracking-nav: 0;
	--cc-tracking-label: 0.16em;   /* 12px uppercase section label */
	--cc-tracking-wider: 0.2em;    /* 11px uppercase eyebrow */

	/* ---------------------------------------------------------------------
	 * Spacing — 0.25rem base, 4px grid
	 * ------------------------------------------------------------------ */

	--cc-space-1: 0.25rem;  /*  4px */
	--cc-space-2: 0.5rem;   /*  8px */
	--cc-space-3: 0.75rem;  /* 12px — mobile grid gutter */
	--cc-space-4: 1rem;     /* 16px */
	--cc-space-5: 1.25rem;  /* 20px — desktop grid gutter, card padding */
	--cc-space-6: 1.5rem;   /* 24px */
	--cc-space-6-5: 1.625rem; /* 26px — the handoff's step 6 and its button padding */
	--cc-space-8-5: 2.125rem; /* 34px — the handoff's desktop gutter */
	--cc-space-9: 2.25rem;   /* 36px */
	--cc-space-11: 2.75rem;  /* 44px — hero inline padding */
	--cc-space-8: 2rem;     /* 32px */
	--cc-space-10: 2.5rem;  /* 40px — container padding at full width */
	--cc-space-12: 3rem;    /* 48px — band padding (mobile) */
	--cc-space-13: 3.25rem; /* 52px — the redesign's section step */
	--cc-space-14: 3.5rem;  /* 56px — the banner plate's inline padding */
	--cc-space-16: 4rem;    /* 64px — the phone banner card's overlap */
	--cc-space-18: 4.5rem;  /* 72px — band padding, the banner plate's block padding */
	--cc-space-20: 5rem;    /* 80px — hero padding-top (>=768px) */
	--cc-space-24: 6rem;    /* 96px — section rhythm (>=768px) */

	/* Vertical section rhythm: the redesign's 52px step from md, 40 below
	 * (2026-09-14). --cc-hero-y is kept for the geometry contract. */
	--cc-section-y: var(--cc-space-10);
	--cc-hero-y: var(--cc-space-12);

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */

	/*
	 * Content width per the redesign (owner decision 2026-09-14): a 1440px
	 * container with a 60px gutter from 1440 up, 32px between 768 and 1439,
	 * 16px below 768 — so 1320px of content on a wide screen. Stepped rather
	 * than fluid because the token sheet gives three values, not a curve.
	 * The steps are set in the media blocks at the end of this file.
	 */
	--cc-container-max: 89.375rem; /* 1430px — the handoff's 1100 frame widened 30% at the owner's request (2026-09-20); every block ends on its edge */      /* 1440px outer */
	--cc-content-max: 82.5rem;      /* 1320px inner, after container padding */
	--cc-prose-max: 48rem;          /* 768px — long-form text measure */
	--cc-container-pad: 1rem;       /* 16px below 768; see the media steps */

	/* Breakpoints — for reference only; CSS cannot use vars in media
	 * queries. Keep these and the @media rules below in agreement. */
	--cc-bp-sm: 40rem;   /*  640px */
	--cc-bp-md: 48rem;   /*  768px */
	--cc-bp-lg: 64rem;   /* 1024px */
	--cc-bp-xl: 80rem;   /* 1280px */

	/* ---------------------------------------------------------------------
	 * Borders, radius, elevation
	 *
	 * The mockup has ZERO border-radius and ZERO box-shadow on every page
	 * checked (home, shop, product, cart, bundle, fairs, size
	 * chart). Depth is carried entirely by hairline rules and the
	 * ground/surface/sand value steps. These are tokenised as 0/none so a
	 * component cannot quietly reintroduce them.
	 *
	 * Interaction is one rule, applied everywhere: text, border and
	 * background all move to accent on hover and focus. See
	 * docs/component-inventory.md.
	 * ------------------------------------------------------------------ */

	--cc-hairline: 1px;
	--cc-border: var(--cc-hairline) solid var(--cc-color-hairline);
	--cc-border-soft: var(--cc-hairline) solid var(--cc-color-hairline-soft);
	--cc-border-strong: var(--cc-hairline) solid var(--cc-color-ink);
	/* ROUNDED, since 2026-09-18: the third design round (owner + reviewer)
	 * draws 10px photo tiles and cards, 6px badges and fully round buttons and
	 * inputs. This supersedes the square-corner decision of 2026-09-14. The
	 * only shadow allowed is still the one under the mobile sticky buy bar. */
	--cc-radius: 0.5rem;         /* 8px — photo tiles and cards (handoff: radius.card) */
	--cc-radius-sm: 0.375rem;    /* 6px — small controls */
	--cc-radius-panel: 0.875rem; /* 14px — the phone's about card (handoff: radius.panel) */
	--cc-radius-pill: 999px;     /* buttons, inputs, badges, the cart count */
	--cc-radius-block: 0;        /* section blocks meet in straight lines (owner, 2026-09-20) */
	--cc-grid-gap: 0.875rem;     /* 14px on a phone; 18px from md — product and collection grids */
	--cc-block-gap: var(--cc-grid-gap); /* the step between blocks, 14 / 18 — the home page's, on every page (owner, 2026-10-02) */
	--cc-shadow: none;
	--cc-shadow-sticky: 0 -6px 18px rgba(31, 31, 29, 0.1);

	/* ---------------------------------------------------------------------
	 * Buttons — the redesign's spec (token sheet, 2026-09-14)
	 *
	 *   Height 50px on desktop, 52px on a phone; 0 30px padding; Archivo 15px
	 *   (14 on a phone), 700, uppercase, 0.06em tracking; radius 0 (ours).
	 *   Primary    action fill, ground text; hover darkens one step to
	 *              action-hover; press nudges 1px down.
	 *   Secondary  transparent fill, 1px ink frame, ink text; hover fills
	 *              with sand.
	 *   Focus      2px action outline, 2px offset.
	 *
	 * The Dawn-era thickening ring is retired with the shop-look it copied.
	 * ------------------------------------------------------------------ */

	/* Header: one 72px bar and a 1px rule. The mockup's announcement strip went
	 * with its header (redesign, 2026-09-14); the free-delivery strip above the
	 * bar since 2026-09-25 is cc-shop-extras' (includes/free-shipping.php). */
	--cc-header-bar-height: 3.25rem;     /* 52px on a phone; 66px from md */

	--cc-btn-height: 2.75rem;                /* 44px on a phone (the touch-target floor); 46px from md */
	--cc-btn-pad-inline: 26px;
	--cc-btn-text: var(--cc-text-small);     /* 14px, weight 500 */
	--cc-btn-tracking: var(--cc-tracking-button);

	/* Focus ring — 2px solid, 2px offset. The colour is currentColor, not a
	 * fixed value: interactive elements turn accent on hover/focus, so the
	 * ring follows the text and reads accent on links and buttons, ink
	 * elsewhere. */
	--cc-focus-width: 2px;
	--cc-focus-offset: 2px;
	--cc-focus-color: var(--cc-color-action);

	/* ---------------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------------ */

	--cc-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--cc-duration-fast: 0.15s;   /* colour transitions — the default */
	--cc-duration-mid: 0.3s;     /* opacity */
	--cc-duration-slow: 0.5s;    /* image zoom on card hover */
}

@media (min-width: 48rem) {
	:root {
		--cc-section-y: var(--cc-space-13);
		--cc-hero-y: var(--cc-space-20);
		--cc-container-pad: 2.125rem;        /* 34px — the handoff's desktop gutter, at every width from md */
		--cc-grid-gap: 1.125rem;             /* 18px */
		--cc-header-bar-height: 4.125rem;    /* 66px */
		--cc-btn-height: 2.875rem;           /* 46px */
	}
}

/* Honour the OS reduced-motion preference. The mockup does not do this;
 * we should. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--cc-duration-fast: 0.01ms;
		--cc-duration-mid: 0.01ms;
		--cc-duration-slow: 0.01ms;
	}
}