/* Codeon Restaurant V2 — 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 ---------- */
	--brand: #0A7968;
	--brand-deep: #075c50;
	--brand-ink: #053f37;
	--accent: #ab8338;

	/* ---------- 2. Semantic — surfaces ---------- */
	--paper: #fbf8f1;
	--surface: #ffffff;
	--surface-2: #f6f1e6;
	--surface-3: #efe6d2;

	/* ---------- 2. Semantic — text ---------- */
	--ink: #1b1d1a;
	--ink-soft: #3a3d39;
	--muted: #706d67;
	--heading: var(--brand-ink);
	--brand-text: var(--brand);
	--accent-text: var(--accent);
	/* Text/icon colour that sits ON a --brand or --brand-ink fill. */
	--on-brand: #ffffff;
	--on-brand-accent: #e7c98a;
	/* 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
	   eight presets while keeping the warm tint. */
	--on-brand-accent-soft: color-mix(in srgb, var(--on-brand-accent) 30%, #fff);

	/* ---------- 2. Semantic — lines, shadows, chrome ---------- */
	--line: rgba(27, 29, 26, 0.12);
	--line-strong: rgba(27, 29, 26, 0.2);
	--shadow-1: 0 1px 0 rgba(27, 29, 26, 0.04), 0 10px 30px -12px rgba(27, 29, 26, 0.15);
	--shadow-2: 0 20px 60px -20px color-mix(in srgb, var(--brand-ink) 35%, transparent);
	--nav-bg: rgba(251, 248, 241, 0.72);
	--nav-bg-scrolled: rgba(251, 248, 241, 0.92);
	--nav-border: rgba(27, 29, 26, 0.06);
	--nav-pill: rgba(27, 29, 26, 0.04);
	--glass: rgba(255, 255, 255, 0.74);
	--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;

	--paper: #0f1211;
	--surface: #171b19;
	--surface-2: #141816;
	--surface-3: #1d2220;

	--ink: #eceeec;
	--ink-soft: #b4bbb7;
	--muted: #848b86;
	--heading: #f4f6f4;
	--brand-text: color-mix(in srgb, var(--brand) 42%, #d9f2ea);
	--accent-text: color-mix(in srgb, var(--accent) 55%, #f4e3c4);

	--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);
	--nav-bg: rgba(15, 18, 17, 0.78);
	--nav-bg-scrolled: rgba(15, 18, 17, 0.94);
	--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. */