/*
 * Whitehill Solution — design tokens.
 *
 * Ported verbatim from the Lovable design system (src/styles.css).
 * Palette: deep navy (#0A1628 / #102A43) + electric cyan (#00B8D9) on
 * porcelain (#F5F8FB). All colours are oklch. Never hard-code a colour in a
 * component; always reference a token from this file.
 *
 * Dark mode has three states, matching the front-end toggle:
 *   - no attribute        → follow prefers-color-scheme
 *   - [data-theme=light]  → force light
 *   - [data-theme=dark]   → force dark
 */

:root {
	--radius: 0.875rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--radius-2xl: calc(var(--radius) + 8px);
	--radius-3xl: calc(var(--radius) + 12px);

	--background: oklch(0.978 0.005 240);
	--foreground: oklch(0.21 0.045 258);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.21 0.045 258);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.21 0.045 258);

	--primary: oklch(0.66 0.13 218);
	--primary-foreground: oklch(0.16 0.04 258);
	--secondary: oklch(0.945 0.012 240);
	--secondary-foreground: oklch(0.24 0.05 258);
	--muted: oklch(0.955 0.008 240);
	--muted-foreground: oklch(0.53 0.03 250);
	--accent: oklch(0.94 0.03 218);
	--accent-foreground: oklch(0.24 0.05 258);
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-foreground: oklch(0.985 0 0);
	--success: oklch(0.68 0.15 158);
	--warning: oklch(0.79 0.15 78);

	--border: oklch(0.905 0.012 245);
	--input: oklch(0.9 0.012 245);
	--ring: oklch(0.66 0.13 218);

	--navy: oklch(0.19 0.045 258);
	--navy-soft: oklch(0.26 0.05 255);
	--navy-foreground: oklch(0.97 0.006 240);
	--cyan: oklch(0.72 0.14 214);
	--cyan-foreground: oklch(0.16 0.04 258);

	--chart-1: oklch(0.66 0.13 218);
	--chart-2: oklch(0.55 0.12 250);
	--chart-3: oklch(0.68 0.15 158);
	--chart-4: oklch(0.79 0.15 78);
	--chart-5: oklch(0.62 0.16 300);

	--gradient-hero: linear-gradient(140deg, oklch(0.17 0.045 258) 0%, oklch(0.24 0.06 250) 55%, oklch(0.32 0.08 230) 100%);
	--gradient-accent: linear-gradient(100deg, var(--cyan), oklch(0.62 0.14 250));

	--shadow-card: 0 1px 2px oklch(0.21 0.045 258 / 0.06), 0 12px 32px -18px oklch(0.21 0.045 258 / 0.35);
	--shadow-lift: 0 2px 6px oklch(0.21 0.045 258 / 0.08), 0 28px 60px -28px oklch(0.21 0.045 258 / 0.45);
	--shadow-glow: 0 0 0 1px oklch(0.72 0.14 214 / 0.35), 0 18px 50px -20px oklch(0.72 0.14 214 / 0.5);

	--font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Layout scale */
	--container: 80rem;
	--container-pad: 1.25rem;
	--header-height: 4.5rem;
}

/* Dark palette. Defined once, applied by both the media query and the toggle. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--background: oklch(0.17 0.042 258);
		--foreground: oklch(0.97 0.006 240);
		--card: oklch(0.22 0.045 256);
		--card-foreground: oklch(0.97 0.006 240);
		--popover: oklch(0.22 0.045 256);
		--popover-foreground: oklch(0.97 0.006 240);
		--primary: oklch(0.72 0.14 214);
		--primary-foreground: oklch(0.16 0.04 258);
		--secondary: oklch(0.26 0.05 255);
		--secondary-foreground: oklch(0.97 0.006 240);
		--muted: oklch(0.26 0.05 255);
		--muted-foreground: oklch(0.72 0.025 250);
		--accent: oklch(0.3 0.055 250);
		--accent-foreground: oklch(0.97 0.006 240);
		--border: oklch(1 0 0 / 12%);
		--input: oklch(1 0 0 / 16%);
		--ring: oklch(0.72 0.14 214);
	}
}

:root[data-theme="dark"] {
	--background: oklch(0.17 0.042 258);
	--foreground: oklch(0.97 0.006 240);
	--card: oklch(0.22 0.045 256);
	--card-foreground: oklch(0.97 0.006 240);
	--popover: oklch(0.22 0.045 256);
	--popover-foreground: oklch(0.97 0.006 240);
	--primary: oklch(0.72 0.14 214);
	--primary-foreground: oklch(0.16 0.04 258);
	--secondary: oklch(0.26 0.05 255);
	--secondary-foreground: oklch(0.97 0.006 240);
	--muted: oklch(0.26 0.05 255);
	--muted-foreground: oklch(0.72 0.025 250);
	--accent: oklch(0.3 0.055 250);
	--accent-foreground: oklch(0.97 0.006 240);
	--border: oklch(1 0 0 / 12%);
	--input: oklch(1 0 0 / 16%);
	--ring: oklch(0.72 0.14 214);
}

/* -------------------------------------------------------------------------
 * Self-hosted fonts. No third-party request on the critical path.
 * Files are optional: if a woff2 is absent the stack falls back to system UI
 * fonts with near-identical metrics, so nothing breaks.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "DM Sans";
	src: url("../fonts/dm-sans-latin-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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