/* ============================================================================
   DURUB — THEME TOKENS · SINGLE SOURCE OF TRUTH
   ----------------------------------------------------------------------------
   This file is loaded first on every page (public site AND admin panel).

   To re-brand the entire app, change the two BRAND HUES below. Every derived
   shade (hover, dark, light, focus ring, borders) is generated from them with
   color-mix(), so a one-line change propagates everywhere, in light and dark.
   ============================================================================ */

:root {
	/* ===== BRAND HUES — AAA (7:1) PREVIEW =====
	   Mode-dependent: darker shades in light mode so text hits 7:1 on white.
	   (Dark-mode lighter shades are set in the [data-theme='dark'] blocks below.) */
	--primary: #565530;     /* dark olive — 7.7:1 on white */
	--secondary: #8a3a1c;   /* dark rust  — 7.8:1 on white */
	--on-accent: #ffffff;   /* text on primary/secondary backgrounds (buttons/badges) */

	/* ===== Derived brand shades (auto-generated from the hues above) ===== */
	--primary-hover: color-mix(in srgb, var(--primary) 84%, black);
	--primary-dark: color-mix(in srgb, var(--primary) 60%, black);
	--secondary-light: color-mix(in srgb, var(--secondary) 80%, white);
	--secondary-dark: color-mix(in srgb, var(--secondary) 58%, black);
	--nav-hover: #6c2d16; /* deep terracotta (= secondary mixed 78% black) — nav/dropdown/side-nav link hover; 8:1 on light navbar & menus. Plain hex by design: var()->color-mix() nested-var breaks as a `color` value in some engines. */
	--focus-ring: var(--primary);
	--border-hover: var(--primary);

	/* ===== LIGHT THEME (default) — surfaces & text ===== */
	--fg: #0e0e0e;
	--bg: #ffffff;
	--bg-secondary: #f8f8f8;
	--form-bg: #fbfbfb;
	--form-fg: #0e0e0e;
	--form-fg-placeholder: #0e0e0e9a;
	--text-muted: #595959;
	--muted: #666666; /* admin alias for --text-muted */
	--border: #e0e0e0;
	--shadow: rgba(0, 0, 0, 0.1);
	--shadow-light: rgba(0, 0, 0, 0.05);

	/* translucent primary tints (alpha differs by mode for contrast) */
	--primary-light: color-mix(in srgb, var(--primary) 15%, transparent);
	--focus-ring-light: color-mix(in srgb, var(--primary) 40%, transparent);

	/* ===== Component surfaces ===== */
	--navbar-bg: color-mix(in srgb, var(--primary) 16%, white); /* soft olive tint */
	--footer-bg: color-mix(in srgb, var(--primary) 16%, white);
	--navbar-border: var(--border);
	--dropdown-bg: var(--bg);
	--dropdown-border: var(--border);
	--dropdown-shadow: var(--shadow);
	--side-nav-border: var(--border);
	--footer-border: var(--border);
	--widget-bg: var(--bg);
	--widget-border: var(--border);
	--widget-shadow: var(--shadow);
}

/* ===== DARK THEME (explicit toggle) ===== */
[data-theme='dark'] {
	/* AAA (7:1) PREVIEW — lighter shades for dark mode so text hits 7:1 on black */
	--primary: #aaa15c;     /* light olive  — 8:1 on black */
	--secondary: #e2885f;   /* light salmon — 7.9:1 on black */
	--on-accent: #14110f;   /* dark text on the lighter accent backgrounds */
	--nav-hover: #f1c4af; /* light terracotta (= secondary mixed 50% white) — nav/dropdown/side-nav link hover; 7:1+ on deep-olive navbar & menus. Plain hex by design (see light-theme note). */
	--fg: #fefefe;
	--bg: #000000;
	--bg-secondary: #1a1a1a;
	--form-bg: #1a1a1a;
	--form-fg: #fefefe;
	--form-fg-placeholder: #fefefe9a;
	--text-muted: #e6e6e6;
	--muted: #999999;
	--border: #333333;
	--shadow: rgba(0, 0, 0, 0.3);
	--shadow-light: rgba(0, 0, 0, 0.1);

	--primary-light: color-mix(in srgb, var(--primary) 25%, transparent);
	--focus-ring-light: color-mix(in srgb, var(--primary) 50%, transparent);

	--navbar-bg: color-mix(in srgb, var(--primary) 20%, #161616); /* deep olive */
	--footer-bg: color-mix(in srgb, var(--primary) 20%, #161616);
	--dropdown-bg: color-mix(in srgb, var(--primary) 20%, #161616);
}

/* ===== DARK THEME (system preference, when no explicit data-theme) ===== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		/* AAA (7:1) PREVIEW — lighter dark-mode shades */
		--primary: #aaa15c;
		--secondary: #e2885f;
		--on-accent: #14110f;
		--nav-hover: #f1c4af; /* light terracotta (= secondary mixed 50% white) — nav/dropdown/side-nav link hover; 7:1+ on dark navbar & menus. Plain hex by design (see light-theme note). */
		--fg: #fefefe;
		--bg: #000000;
		--bg-secondary: #1a1a1a;
		--form-bg: #1a1a1a;
		--form-fg: #fefefe;
		--form-fg-placeholder: #fefefe9a;
		--text-muted: #e6e6e6;
		--muted: #999999;
		--border: #333333;
		--shadow: rgba(0, 0, 0, 0.3);
		--shadow-light: rgba(0, 0, 0, 0.1);

		--primary-light: color-mix(in srgb, var(--primary) 25%, transparent);
		--focus-ring-light: color-mix(in srgb, var(--primary) 50%, transparent);

		--navbar-bg: #35393c;
		--footer-bg: #35393c;
		--dropdown-bg: #35393c;
	}
}

/* ===== High-contrast preference ===== */
@media (prefers-contrast: high) {
	:root {
		--focus-ring: #000000;
		--text-muted: #000000;
		--muted: #000000;
		--primary-hover: var(--primary-dark);
	}

	[data-theme='dark'] {
		--focus-ring: #ffffff;
		--text-muted: #ffffff;
		--muted: #ffffff;
		--primary-hover: color-mix(in srgb, var(--primary) 84%, black);
	}
}