/* CodeOrder Theme — design tokens.
 *
 * Three layers, in this order:
 *
 *   1. BRAND      --brand / --brand-deep / --brand-ink / --accent
 *                 Hue-carrying colours. Written by the Customizer (or by the
 *                 active preset) via inline CSS on :root — see inc/setup.php.
 *
 *   2. SEMANTIC   --paper / --surface / --heading / --ink / --line / …
 *                 What a rule should actually reference. These are the only
 *                 tokens that flip between light and dark.
 *
 *   3. LEGACY     --green / --cream / --gold / …
 *                 Kept as aliases so older rules keep working. Do NOT use
 *                 them in new CSS, and never use them for text colour — text
 *                 colour must come from --heading / --ink / --brand-text so
 *                 that dark mode stays readable.
 *
 * Bridge tokens (--bg-card, --text-primary, --border-color, …) exist because
 * the CodeOrder plugin's frontend-theme-bridge.css reads them to restyle its
 * own UI under html[data-theme="dark"]. Renaming them breaks plugin dark mode.
 */

:root {
	color-scheme: light;

	/* ---------- 1. Brand ---------- */
	/* Fallbacks only: the active preset or the Customizer writes every one of
	   these on :root (inc/setup.php). They match the default CodeOrder preset. */
	--brand: #6f00ff;
	--brand-deep: #5a00cf;
	--brand-ink: #24124f;
	--accent: #3d4fe0;

	/* ---------- 2. Semantic — surfaces ---------- */
	--paper: #f9f8fd;
	--surface: #ffffff;
	--surface-2: #f1eefb;
	--surface-3: #e5dff7;

	/* ---------- 2. Semantic — text ---------- */
	--ink: #15131f;
	--ink-soft: #37334a;
	--muted: #5f5b73;
	--heading: var(--brand-ink);
	--brand-text: var(--brand);
	--accent-text: var(--accent);
	/* Text/icon colour that sits ON a --brand or --brand-ink fill (header button,
	   services, gallery, footer, bottom bar). Customizer: "Text on the primary
	   and deep colours". */
	--on-brand: #ffffff;
	/* The highlight on those fills and on photos: italic words, stars, numbers.
	   Customizer: "Accent on dark backgrounds". */
	--on-brand-accent: #c9b6ff;
	/* For SMALL text on a mid-tone --brand fill (e.g. the gallery eyebrow). The
	   full accent only reaches 3.3:1 on the lighter brands, which is fine for a
	   56px heading but fails an 11px label; this pale mix clears 4.6:1 on all
	   every preset while keeping its tint. */
	--on-brand-accent-soft: color-mix(in srgb, var(--on-brand-accent) 30%, #fff);

	/* ---------- 2. Semantic — lines, shadows, chrome ---------- */
	/* Lines and shadows are the text colour at low strength, so they carry the
	   preset's tint instead of a fixed green-grey. */
	--line: color-mix(in srgb, var(--ink) 12%, transparent);
	--line-strong: color-mix(in srgb, var(--ink) 20%, transparent);
	--shadow-1: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--ink) 15%, transparent);
	--shadow-2: 0 20px 60px -20px color-mix(in srgb, var(--brand-ink) 35%, transparent);
	/* Derived from the preset's paper: a fixed cream here tinted the bar of
	   every non-cream preset (the default violet one included). */
	--nav-bg: color-mix(in srgb, var(--paper) 72%, transparent);
	--nav-bg-scrolled: color-mix(in srgb, var(--paper) 92%, transparent);
	--nav-border: color-mix(in srgb, var(--ink) 6%, transparent);
	--nav-pill: color-mix(in srgb, var(--ink) 4%, transparent);
	--glass: rgba(255, 255, 255, 0.74);
	/* The dark behind sheets and dialogs and over photos: the deep brand colour
	   pushed towards black, so a violet site gets a violet-black, a green site a
	   green-black. Use with color-mix(… var(--scrim) N%, transparent). */
	--scrim: color-mix(in srgb, var(--brand-ink) 40%, #000);
	/* Cart count bubble. */
	--badge: #e5484d;
	--on-badge: #ffffff;
	--danger-text: #8a2929;
	--danger-line: rgba(184, 80, 80, 0.18);
	--danger-bg: rgba(184, 80, 80, 0.055);
	--ok-dot: #6dd5b2;

	/* ---------- 3. Legacy aliases ---------- */
	--green: var(--brand);
	--green-deep: var(--brand-deep);
	--green-ink: var(--brand-ink);
	--cream: var(--surface-2);
	--cream-warm: var(--surface-3);
	--gold: var(--accent);

	/* ---------- Bridge: consumed by CodeOrder frontend-theme-bridge.css ---------- */
	--bg-primary: var(--paper);
	--bg-secondary: var(--surface-2);
	--bg-tertiary: var(--surface-3);
	--bg-card: var(--surface);
	--bg-card-hover: color-mix(in srgb, var(--surface) 93%, var(--ink));
	--text-primary: var(--ink);
	--text-secondary: var(--ink-soft);
	--text-muted: var(--muted);
	--border-color: var(--line);

	/* ---------- Typography ---------- */
	--font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
	--font-eyebrow: 'Manrope', system-ui, sans-serif;
}

/* Dark theme.
 *
 * Selector is html[data-theme="dark"] (specificity 0,1,1) on purpose: the
 * Customizer writes its light values to :root (0,1,0) through an inline
 * <style> appended AFTER this file, so a plain [data-theme] block would lose
 * the cascade. Keep the html prefix.
 *
 * Brand tokens are deliberately NOT flipped — a brand stays a brand. Only
 * surfaces, text and chrome move, plus --heading / --brand-text / --accent-text,
 * which are the readable-on-background counterparts of the brand hues. */
html[data-theme="dark"] {
	color-scheme: dark;

	/* Page and card come from the preset (or the Customizer's two dark colours,
	   written after this file). Everything else is derived from them and from
	   the brand, so every preset gets its own dark ramp. These used to be fixed
	   green-blacks (#141816, #1d2220…) on every preset, which is what showed up
	   under the violet default and in CodeOrder's dark menu and cart. */
	--paper: #0d0b17;
	--surface: #16132a;
	--surface-2: color-mix(in srgb, var(--surface) 50%, var(--paper));
	--surface-3: color-mix(in srgb, var(--surface) 88%, #fff);

	--ink: color-mix(in srgb, var(--brand) 6%, #ececf0);
	--ink-soft: color-mix(in srgb, var(--brand) 10%, #b8b7c0);
	--muted: color-mix(in srgb, var(--brand) 12%, #8d8b96);
	--heading: color-mix(in srgb, var(--brand) 4%, #f7f7f9);
	--brand-text: color-mix(in srgb, var(--brand) 45%, #fff);
	--accent-text: color-mix(in srgb, var(--accent) 55%, #fff);

	--line: rgba(255, 255, 255, 0.1);
	--line-strong: rgba(255, 255, 255, 0.18);
	--shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 10px 30px -12px rgba(0, 0, 0, 0.6);
	--shadow-2: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
	--scrim: color-mix(in srgb, var(--paper) 70%, #000);
	--nav-bg: color-mix(in srgb, var(--paper) 78%, transparent);
	--nav-bg-scrolled: color-mix(in srgb, var(--paper) 94%, transparent);
	--nav-border: rgba(255, 255, 255, 0.08);
	--nav-pill: rgba(255, 255, 255, 0.05);
	--glass: rgba(255, 255, 255, 0.06);
	--danger-text: #ff9b9b;
	--danger-line: rgba(255, 122, 122, 0.24);
	--danger-bg: rgba(255, 122, 122, 0.09);
}

/* Sections painted with a brand fill (services, gallery, footer) keep their own
   light-on-dark palette in both themes, so they need no dark-specific rules. */