/*
 * WiseBox design tokens (light and dark).
 * Source: WiseBox Design System, tokens.json. Change values there first, then here.
 * Dark values apply when the OS prefers dark, unless <html data-theme="light"> is set;
 * <html data-theme="dark"> forces dark.
 */

/* Inter 4.x variable font (weights 400-700 in one file per subset), self-hosted. latin-ext holds the Hungarian o/u with double acute. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: light;

	--primary: #0A7B7F;
	--primary-hover: #085F62;
	--on-primary: #FFFFFF;
	--primary-soft: #E3F1F1;
	--primary-text: #085F62;

	--surface-page: #F8F9FA;
	--surface-card: #FFFFFF;
	--surface-sunken: #EEF3F4;
	--border: #DEE2E6;
	--text: #2C3E50;
	--text-muted: #5A6C7D;

	--success: #2E7D4F;
	--success-soft: #E6F4EC;
	--warning: #9A5B00;
	--warning-soft: #FFF4DC;
	--error: #C0392B;
	--error-soft: #FBE9E7;
	--info: #2F6FB5;
	--info-soft: #E6EFF9;

	--logo-blue: #00A0E3;
	--logo-green: #00964B;
	--logo-green-dark: #006E37;
	--logo-orange: #E97C1A;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 30px 80px rgba(15, 23, 42, 0.12);
	--focus-ring: 0 0 0 3px rgba(10, 123, 127, 0.35);

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 999px;

	--control-height: 40px;
	--control-height-sm: 32px;
	--control-height-lg: 48px;
	--nav-width: 200px;
	--nav-width-collapsed: 56px;
	--header-height: 64px;

	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* white logo variant switch: login pages show .logo-on-light or .logo-on-dark */
	--logo-light-display: inline-block;
	--logo-dark-display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--primary: #3FB5B9;
		--primary-hover: #66C7CA;
		--on-primary: #06282A;
		--primary-soft: #17363A;
		--primary-text: #8EDBDE;

		--surface-page: #12191C;
		--surface-card: #1A2428;
		--surface-sunken: #223036;
		--border: #2F3F45;
		--text: #E6EEF0;
		--text-muted: #9FB1B6;

		--success: #6CCB8D;
		--success-soft: #173326;
		--warning: #E3A743;
		--warning-soft: #3A2F14;
		--error: #F0817A;
		--error-soft: #3A1D1B;
		--info: #7FB2EA;
		--info-soft: #18283A;

		--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
		--focus-ring: 0 0 0 3px rgba(63, 181, 185, 0.5);

		--logo-light-display: none;
		--logo-dark-display: inline-block;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--primary: #3FB5B9;
	--primary-hover: #66C7CA;
	--on-primary: #06282A;
	--primary-soft: #17363A;
	--primary-text: #8EDBDE;

	--surface-page: #12191C;
	--surface-card: #1A2428;
	--surface-sunken: #223036;
	--border: #2F3F45;
	--text: #E6EEF0;
	--text-muted: #9FB1B6;

	--success: #6CCB8D;
	--success-soft: #173326;
	--warning: #E3A743;
	--warning-soft: #3A2F14;
	--error: #F0817A;
	--error-soft: #3A1D1B;
	--info: #7FB2EA;
	--info-soft: #18283A;

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
	--focus-ring: 0 0 0 3px rgba(63, 181, 185, 0.5);

	--logo-light-display: none;
	--logo-dark-display: inline-block;
}

/* validation error state set by js/form.js (replaces the old inline red/black styles, so the theme controls the colours) */
.is-error.is-error { border-color: var(--error); color: var(--error); }

/* browser autofill (Chrome, Bitwarden) must not bring its own dark text or light background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	caret-color: var(--text);
	transition: background-color 600000s 0s;
}

.logo-on-light { display: var(--logo-light-display); }
.logo-on-dark { display: var(--logo-dark-display); }