/**
 * Design tokens — copied 1:1 from the brizomarket.com stylesheet.
 *
 * The live site names its indigo accent "--teal"; the alias is kept below so
 * values stay traceable to the source. Prefer the --bz-* names in new code.
 */

:root {
	/* Surfaces */
	--bz-bg: #0b0f0e;
	--bz-surface: #121815;
	--bz-surface-2: #182019;

	/* Text */
	--bz-ink: #ecefea;
	--bz-ink-soft: #9daa9f;
	--bz-ink-faint: #6c7871;

	/* Lines */
	--bz-border: #253028;

	/* Accent (indigo) */
	--bz-accent: #635bff;
	--bz-accent-strong: #8a82ff;
	--bz-accent-tint: #1b1830;
	--bz-teal: var(--bz-accent);
	--bz-teal-strong: var(--bz-accent-strong);
	--bz-teal-tint: var(--bz-accent-tint);

	/* Status */
	--bz-amber: #e2a73f;
	--bz-amber-tint: #241d0f;
	--bz-red: #e27c74;
	--bz-red-tint: #251413;

	/* Terminal / data surfaces */
	--bz-terminal-bg: #060908;
	--bz-terminal-surface: #0e1412;
	--bz-terminal-border: #212b25;
	--bz-terminal-ink: #ecefea;
	--bz-terminal-ink-soft: #8b978f;

	/* Elevation */
	--bz-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px -14px rgba(0, 0, 0, 0.6);

	/* Translucent chrome that sits over the page */
	--bz-header-bg: rgba(11, 15, 14, 0.86);

	/* Channel identity */
	--bz-channel-shopify: #22c4ac;
	--bz-channel-shopee: #e2a73f;
	--bz-channel-lazada: #e27c74;
	--bz-channel-tiktok: #c7cfc9;

	/* Type */
	--bz-font-heading: 'Archivo', ui-sans-serif, system-ui, sans-serif;
	--bz-font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
	--bz-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Geometry */
	--bz-radius: 10px;
	--bz-radius-sm: 6px;
	--bz-container: 1200px;
	--bz-gutter: clamp(20px, 4vw, 40px);
	--bz-section: clamp(56px, 8vw, 96px);
	--bz-header-height: 64px;
}

/**
 * Light mode.
 *
 * Dark is the theme's own palette, taken from brizomarket.com; the light ramp is
 * its counterpart, built on the same green-tinted neutrals so surfaces keep their
 * relationship. The accent stays brand indigo, darkened for contrast on white.
 *
 * `data-theme` is set on <html> by the boot script in inc/theme-mode.php, so the
 * saved choice is applied before the stylesheets load and nothing flashes.
 */
html[data-theme='light'] {
	/* Surfaces */
	--bz-bg: #ffffff;
	--bz-surface: #f7f9f8;
	--bz-surface-2: #eef2f0;

	/* Text */
	--bz-ink: #0b0f0e;
	--bz-ink-soft: #4f5b55;
	--bz-ink-faint: #78837d;

	/* Lines */
	--bz-border: #dfe5e2;

	/* Accent (indigo, darkened: #8a82ff fails contrast on white) */
	--bz-accent: #635bff;
	--bz-accent-strong: #4f46e5;
	--bz-accent-tint: #eeebff;

	/* Status */
	--bz-amber: #a16207;
	--bz-amber-tint: #fdf4e3;
	--bz-red: #b3261e;
	--bz-red-tint: #fdecea;

	/* Terminal / data surfaces */
	--bz-terminal-bg: #f2f5f3;
	--bz-terminal-surface: #e9eeec;
	--bz-terminal-border: #d8e0dc;
	--bz-terminal-ink: #0b0f0e;
	--bz-terminal-ink-soft: #55605a;

	/* Elevation */
	--bz-shadow: 0 1px 2px rgba(16, 24, 20, 0.06), 0 12px 28px -14px rgba(16, 24, 20, 0.18);

	/* Translucent chrome that sits over the page */
	--bz-header-bg: rgba(255, 255, 255, 0.86);

	/* Channel identity */
	--bz-channel-shopify: #0e9384;
	--bz-channel-shopee: #b45309;
	--bz-channel-lazada: #c0392b;
	--bz-channel-tiktok: #6b7671;

	/*
	 * theme.json also emits these as --wp--preset--color--* on :root, and WordPress'
	 * own global styles paint body, headings, links and buttons from them. Pointing
	 * them at the tokens above keeps core's rules in step with the switch — a plain
	 * :root rule would lose to core's, hence the html[...] specificity.
	 */
	--wp--preset--color--bg: var(--bz-bg);
	--wp--preset--color--surface: var(--bz-surface);
	--wp--preset--color--surface-2: var(--bz-surface-2);
	--wp--preset--color--ink: var(--bz-ink);
	--wp--preset--color--ink-soft: var(--bz-ink-soft);
	--wp--preset--color--ink-faint: var(--bz-ink-faint);
	--wp--preset--color--border: var(--bz-border);
	--wp--preset--color--accent: var(--bz-accent);
	--wp--preset--color--accent-strong: var(--bz-accent-strong);
	--wp--preset--color--accent-tint: var(--bz-accent-tint);
	--wp--preset--color--amber: var(--bz-amber);
	--wp--preset--color--red: var(--bz-red);
	--wp--preset--color--channel-shopify: var(--bz-channel-shopify);
	--wp--preset--color--channel-shopee: var(--bz-channel-shopee);
	--wp--preset--color--channel-lazada: var(--bz-channel-lazada);
	--wp--preset--color--channel-tiktok: var(--bz-channel-tiktok);
}