/*
 * Consenna design tokens — light and dark.
 *
 * Mode follows the device unless the person picks one in the sidebar, which sets
 * data-theme="light" | "dark" on <html> (see functions.php).
 */
:root {
	color-scheme: light;

	/* Widest the main content gets (next to the sidebar). Smaller screens just fill the space. */
	--app-content-max: 1760px;

	--font-heading: "Space Grotesk", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	/* Brand */
	--brand-teal: #1EADC5;
	--brand-blue: #4C8DF6;
	--brand-purple: #7B5CE6;
	--brand-navy: #0B1C2E;
	--brand-gradient: linear-gradient(135deg, #1EADC5 0%, #4C8DF6 55%, #7B5CE6 100%);

	/* Surfaces */
	--c-bg: #F3F5F9;
	--c-surface: #FFFFFF;
	--c-surface-2: #F8FAFC;
	--c-surface-3: #EEF2F7;
	--c-border: #E4E9F0;
	--c-border-strong: #CDD6E1;

	/* Text */
	--c-heading: #0B1C2E;
	--c-text: #1A2636;
	--c-text-2: #4B5B6F;
	--c-muted: #7D8B9C;

	/* Accents */
	--c-primary: #1EADC5;
	--c-primary-strong: #0F8A9F;
	--c-primary-soft: rgba(30, 173, 197, 0.12);
	--c-focus: rgba(30, 173, 197, 0.35);

	/* Status tones: tone = base colour, fg = readable text on a tinted background */
	--tone-slate: #64748B;  --tone-slate-fg: #475569;
	--tone-teal: #1EADC5;   --tone-teal-fg: #0B7F93;
	--tone-blue: #4C8DF6;   --tone-blue-fg: #2563C9;
	--tone-purple: #7B5CE6; --tone-purple-fg: #5A3FC7;
	--tone-amber: #F59E0B;  --tone-amber-fg: #A15C00;
	--tone-red: #EF4444;    --tone-red-fg: #C42525;
	--tone-green: #22C55E;  --tone-green-fg: #177A3E;

	/* Sidebar (dark in both modes) */
	--sb-bg: #0B1C2E;
	--sb-text: #A9B8CA;
	--sb-text-strong: #FFFFFF;
	--sb-hover: rgba(255, 255, 255, 0.06);
	--sb-active: rgba(255, 255, 255, 0.1);
	--sb-border: rgba(255, 255, 255, 0.08);

	/* Shape & depth */
	--radius-sm: 8px;
	--radius: 14px;
	--radius-lg: 20px;
	--shadow-sm: 0 1px 2px rgba(15, 30, 50, 0.05);
	--shadow: 0 1px 2px rgba(15, 30, 50, 0.04), 0 6px 20px rgba(15, 30, 50, 0.06);
	--shadow-lg: 0 12px 40px rgba(15, 30, 50, 0.14);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--c-bg: #080F19;
		--c-surface: #0F1826;
		--c-surface-2: #0C1420;
		--c-surface-3: #16212F;
		--c-border: #1C2838;
		--c-border-strong: #2A3A50;
		--c-heading: #F3F7FB;
		--c-text: #DDE5EF;
		--c-text-2: #A3B1C3;
		--c-muted: #6F8097;
		--c-primary: #2FC6DE;
		--c-primary-strong: #62D8EB;
		--c-primary-soft: rgba(47, 198, 222, 0.14);
		--c-focus: rgba(47, 198, 222, 0.4);
		--tone-slate-fg: #A7B5C8;
		--tone-teal-fg: #5FD7EA;
		--tone-blue-fg: #8DB6FF;
		--tone-purple-fg: #B6A6FA;
		--tone-amber-fg: #FBC05B;
		--tone-red-fg: #FF8F8F;
		--tone-green-fg: #6EE7A0;
		--sb-bg: #050B14;
		--sb-border: rgba(255, 255, 255, 0.06);
		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
		--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
	}
}

/* Same values as above, for people who chose dark explicitly. */
:root[data-theme="dark"] {
	color-scheme: dark;
	--c-bg: #080F19;
	--c-surface: #0F1826;
	--c-surface-2: #0C1420;
	--c-surface-3: #16212F;
	--c-border: #1C2838;
	--c-border-strong: #2A3A50;
	--c-heading: #F3F7FB;
	--c-text: #DDE5EF;
	--c-text-2: #A3B1C3;
	--c-muted: #6F8097;
	--c-primary: #2FC6DE;
	--c-primary-strong: #62D8EB;
	--c-primary-soft: rgba(47, 198, 222, 0.14);
	--c-focus: rgba(47, 198, 222, 0.4);
	--tone-slate-fg: #A7B5C8;
	--tone-teal-fg: #5FD7EA;
	--tone-blue-fg: #8DB6FF;
	--tone-purple-fg: #B6A6FA;
	--tone-amber-fg: #FBC05B;
	--tone-red-fg: #FF8F8F;
	--tone-green-fg: #6EE7A0;
	--sb-bg: #050B14;
	--sb-border: rgba(255, 255, 255, 0.06);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}