/*
 * GearDock Design System — Tokens
 * Uebernommen aus dem Claude-Design-Projekt "WooCommerce Demo Shop".
 * Der Dark-Block des Design-Systems steht dort unter [data-theme="dark"];
 * hier wird er zusaetzlich an prefers-color-scheme gehaengt, damit der Shop
 * automatisch der Systemeinstellung folgt.
 */

/* ---------- Schriften, lokal eingebettet (kein Google-CDN) ---------- */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

/* ---------- Farben: Light ---------- */

:root {
	--md-primary: #0A6CFF;
	--md-on-primary: #FFFFFF;
	--md-primary-container: #DCE6FF;
	--md-on-primary-container: #001A43;
	--md-secondary: #12B3A8;
	--md-on-secondary: #FFFFFF;
	--md-secondary-container: #B8F5EE;
	--md-on-secondary-container: #00201D;
	--md-tertiary: #7A5AF8;
	--md-on-tertiary: #FFFFFF;
	--md-tertiary-container: #E7DFFF;
	--md-on-tertiary-container: #23005E;
	--md-error: #BA1A1A;
	--md-on-error: #FFFFFF;
	--md-error-container: #FFDAD6;
	--md-on-error-container: #410002;
	--md-background: #F3F6FB;
	--md-on-background: #1A1C1E;
	--md-surface: #FFFBFF;
	--md-on-surface: #1A1C1E;
	--md-surface-variant: #E1E2EC;
	--md-on-surface-variant: #44474E;
	--md-outline: #74777F;
	--md-outline-variant: #C4C6D0;
	--md-surface-container-lowest: #FFFFFF;
	--md-surface-container-low: #F6F5FA;
	--md-surface-container: #F0EFF4;
	--md-surface-container-high: #EAEAEF;
	--md-surface-container-highest: #E4E4E9;
	--md-inverse-surface: #2F3033;
	--md-inverse-on-surface: #F1F0F4;
	--md-inverse-primary: #B0C6FF;
	--md-scrim: #000000;
	--md-shadow: #000000;

	/* LED-Akzente: in beiden Modi identisch, das ist die Produktsprache */
	--led-red: #FF4D4D;
	--led-orange: #FF9D42;
	--led-amber: #FFC542;
	--led-green: #4CE07A;
	--led-teal: #12B3A8;
	--led-cyan: #3DD9F5;
	--led-blue: #0A6CFF;
	--led-violet: #7A5AF8;
	--led-magenta: #F050D8;
	--led-white: #F5F7FF;

	--status-online: #22C55E;
	--status-offline: #74777F;
	--status-updating: #FFC542;

	/* Buehne hinter Produktrenders — im Entwurf in beiden Modi dunkel */
	--gd-stage: radial-gradient(circle at 50% 40%, #262b34 0%, #0c0e11 75%);
	--gd-stage-hero: radial-gradient(circle at 60% 40%, #262b34 0%, #0c0e11 72%);
	--gd-on-stage: #FFFFFF;
	--gd-on-stage-variant: #C4C6D0;

	/* Typografie */
	--font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

	/* Radius */
	--radius-xs: 8px;
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 22px;
	--radius-xl: 28px;
	--radius-full: 999px;

	/* Spacing */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Elevation */
	--elevation-0: none;
	--elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .16), 0 1px 3px 1px rgba(0, 0, 0, .08);
	--elevation-2: 0 1px 2px 0 rgba(0, 0, 0, .18), 0 2px 6px 2px rgba(0, 0, 0, .10);
	--elevation-3: 0 1px 3px 0 rgba(0, 0, 0, .20), 0 4px 8px 3px rgba(0, 0, 0, .12);
	--elevation-4: 0 2px 3px 0 rgba(0, 0, 0, .20), 0 6px 10px 4px rgba(0, 0, 0, .14);
	--glow-blur-sm: 16px;
	--glow-blur-md: 28px;
	--glow-blur-lg: 44px;

	/* Motion */
	--ease-standard: cubic-bezier(.2, 0, 0, 1);
	--ease-emphasized: cubic-bezier(.3, 0, .1, 1);
	--dur-short: 150ms;
	--dur-medium: 300ms;
	--dur-long: 500ms;
	--dur-pulse: 1800ms;
}

/* ---------- Farben: Dark ---------- */

/* Automatik nach Systemeinstellung — so entschieden fuer v1.
   Das :not([data-theme="light"]) kostet nichts und macht einen spaeteren
   manuellen Umschalter zu einer Ein-Zeilen-Aenderung. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--md-primary: #8FA8FF;
		--md-on-primary: #00265E;
		--md-primary-container: #16418F;
		--md-on-primary-container: #DCE6FF;
		--md-secondary: #8BCFC5;
		--md-on-secondary: #003732;
		--md-secondary-container: #00504A;
		--md-on-secondary-container: #A6F2E7;
		--md-tertiary: #C9BBFF;
		--md-on-tertiary: #3A2586;
		--md-tertiary-container: #5B3FCE;
		--md-on-tertiary-container: #E7DFFF;
		--md-error: #FFB4AB;
		--md-on-error: #690005;
		--md-error-container: #93000A;
		--md-on-error-container: #FFDAD6;
		--md-background: #121419;
		--md-on-background: #E3E2E6;
		--md-surface: #1F232A;
		--md-on-surface: #E3E2E6;
		--md-surface-variant: #44474E;
		--md-on-surface-variant: #C4C6D0;
		--md-outline: #8E9099;
		--md-outline-variant: #44474E;
		--md-surface-container-lowest: #0B0D11;
		--md-surface-container-low: #1A1C21;
		--md-surface-container: #232830;
		--md-surface-container-high: #2D3239;
		--md-surface-container-highest: #383D44;
		--md-inverse-surface: #E3E2E6;
		--md-inverse-on-surface: #2F3033;
		--md-inverse-primary: #0A6CFF;
		--status-online: #4ADE80;
		--status-offline: #8E9099;
		--status-updating: #FFD766;
	}
}