/*
 * 12/css/zen.css
 * Zen CSS Variables
 * Used for theming the site with light and dark modes.
 */

body[data-theme="light"] {
	--bg-main: #ffffff;
	--bg-content: rgba(255, 255, 255, 0.85);
	--bg-filter: rgba(237, 237, 237, 0.95);

	--bg-panel: #c9c9c9;
	--bg-panel-subtle: #eaeaea;
	--bg-panel-hover: #dddddd;

	--bg-button-primary: #2c7be5;
	--bg-button-primary-hover: #1f66c2;
	--text-on-primary: #ffffff;
	--bg-button-selected: #27ae60;

	--text-main: #111111;
	--text-muted: #555555;

	--bg-card: ##c9c9c9;
	--bg-card-hover: #f4f4f4;
	--bg-card-active: #eeeeee;

	--border-soft: #dddddd;
	--border-strong: #aaaaaa;
}

body[data-theme="dark"] {
	--bg-main: #0f0f0f;
	--bg-content: rgba(20, 20, 20, 0.85);
	--bg-filter: rgba(25, 25, 25, 0.9);

	--bg-panel: rgba(25, 25, 25, 0.9);
	--bg-panel-subtle: rgba(35, 35, 35, 0.9);
	--bg-panel-hover: rgba(50, 50, 50, 0.95);

	--bg-button-primary: #2c7be5;
	--bg-button-primary-hover: #3a8cff;
	--text-on-primary: #ffffff;
	--bg-button-selected: #27ae60;

	--text-main: #e6e6e6;
	--text-muted: #aaaaaa;

	--bg-card: rgba(30, 30, 30, 0.9);
	--bg-card-hover: rgba(45, 45, 45, 0.95);
	--bg-card-active: rgba(60, 60, 60, 1);

	--border-soft: #333333;
	--border-strong: #666666;
}

body {
	--logo-on-light: url("/12/gfx/UR_Laila_1500x700_dark.png");
	--logo-on-dark: url("/12/gfx/UR_Laila_1500x700_grey.png");
}

:root {
	/* Layout */
	--header-height: 100px;
	--panel-width-desktop: 360px;

	/* Spacing */
	--gap-xs: 8px;
	--gap-sm: 12px;
	--gap-md: 16px;
	--gap-lg: 24px;
	--gap-xl: 32px;
	--gap-xxl: 48px;
}