/**
 * Design tokens.
 *
 * The HSL triples below are copied verbatim from the source application
 * (pc-bottleneck/client/src/index.css) so the WordPress chrome — header,
 * footer, content, blog — renders in exactly the same palette as the mounted
 * calculators. The calculators ship their own copy of these variables inside
 * assets/app/pc-tools-app.css; both must stay in step, so if one is changed
 * the other has to be changed with it.
 *
 * They are declared as raw HSL components, matching the shadcn/ui convention
 * the original uses, and wrapped into the --pct-* names the theme's own
 * stylesheets consume.
 */

:root {
	/* ---- Source application tokens: light theme ---- */
	--background: 210 40% 98%;
	--foreground: 222 47% 11%;
	--muted: 210 40% 93%;
	--muted-foreground: 215 25% 40%;
	--popover: 0 0% 100%;
	--popover-foreground: 222 47% 11%;
	--card: 0 0% 100%;
	--card-foreground: 222 47% 11%;
	--border: 214.3 31.8% 90%;
	--input: 214.3 31.8% 91%;

	--primary: 222 89% 55%;
	--primary-foreground: 210 40% 98%;

	--secondary: 210 40% 96%;
	--secondary-foreground: 222 47% 11%;

	--accent: 216 100% 55%;
	--accent-foreground: 210 40% 98%;

	--success: 142 71% 45%;
	--success-foreground: 210 40% 98%;
	--warning: 38 92% 50%;
	--warning-foreground: 210 40% 98%;
	--destructive: 0 84% 60%;
	--destructive-foreground: 210 40% 98%;

	--ring: 222 89% 65%;
	--radius: 0.5rem;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* ---- Typography ---- */
	--pct-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--pct-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--pct-text-xs: 0.75rem;
	--pct-text-sm: 0.875rem;
	--pct-text-base: 1rem;
	--pct-text-lg: 1.125rem;
	--pct-text-xl: 1.25rem;
	--pct-text-2xl: 1.5rem;
	--pct-text-3xl: 1.875rem;
	--pct-text-4xl: 2.25rem;
	--pct-text-5xl: 3rem;

	--pct-leading-tight: 1.2;
	--pct-leading-snug: 1.4;
	--pct-leading-normal: 1.65;

	/* ---- Spacing ---- */
	--pct-space-1: 0.25rem;
	--pct-space-2: 0.5rem;
	--pct-space-3: 0.75rem;
	--pct-space-4: 1rem;
	--pct-space-5: 1.25rem;
	--pct-space-6: 1.5rem;
	--pct-space-8: 2rem;
	--pct-space-10: 2.5rem;
	--pct-space-12: 3rem;
	--pct-space-16: 4rem;
	--pct-space-20: 5rem;
	--pct-space-24: 6rem;

	/* ---- Radii, derived from the source application's --radius ---- */
	--pct-radius-sm: calc(var(--radius) - 0.25rem);
	--pct-radius: var(--radius);
	--pct-radius-md: calc(var(--radius) + 0.25rem);
	--pct-radius-lg: calc(var(--radius) + 0.5rem);
	--pct-radius-xl: calc(var(--radius) + 1rem);
	--pct-radius-full: 9999px;

	/* ---- Layout ---- */
	--pct-container: 1280px;
	--pct-container-narrow: 760px;
	--pct-gutter: 1rem;
	--pct-header-height: 64px;

	--pct-transition: 200ms ease;

	/* ---- Semantic names the theme's stylesheets use ---- */
	--pct-bg: hsl(var(--background));
	--pct-bg-subtle: hsl(var(--secondary));
	--pct-bg-muted: hsl(var(--muted));
	--pct-surface: hsl(var(--card));
	--pct-surface-raised: hsl(var(--popover));
	--pct-surface-sunken: hsl(var(--muted));
	--pct-surface-hover: hsl(var(--muted));

	--pct-hero-bg: hsl(var(--background));
	--pct-hero-glow: hsl(var(--primary) / 0.08);

	--pct-text: hsl(var(--foreground));
	--pct-text-muted: hsl(var(--muted-foreground));
	--pct-text-subtle: hsl(var(--muted-foreground));
	--pct-text-inverse: hsl(var(--primary-foreground));
	--pct-heading: hsl(var(--foreground));

	--pct-border: hsl(var(--border));
	--pct-border-strong: hsl(var(--border));
	--pct-border-subtle: hsl(var(--border) / 0.6);

	--pct-accent: hsl(var(--primary));
	--pct-accent-hover: hsl(var(--accent));
	--pct-accent-text: hsl(var(--primary-foreground));
	--pct-accent-subtle: hsl(var(--primary) / 0.1);
	--pct-accent-border: hsl(var(--primary) / 0.35);
	--pct-focus-ring: hsl(var(--ring));

	--pct-input-bg: hsl(var(--card));
	--pct-input-border: hsl(var(--input));
	--pct-input-border-hover: hsl(var(--primary) / 0.5);
	--pct-input-text: hsl(var(--foreground));
	--pct-input-placeholder: hsl(var(--muted-foreground));
	--pct-input-disabled-bg: hsl(var(--muted));

	--pct-success: hsl(var(--success));
	--pct-success-bg: hsl(var(--success) / 0.12);
	--pct-success-border: hsl(var(--success) / 0.3);
	--pct-info: hsl(var(--primary));
	--pct-info-bg: hsl(var(--primary) / 0.1);
	--pct-info-border: hsl(var(--primary) / 0.3);
	--pct-warning: hsl(var(--warning));
	--pct-warning-bg: hsl(var(--warning) / 0.12);
	--pct-warning-border: hsl(var(--warning) / 0.3);
	--pct-danger: hsl(var(--destructive));
	--pct-danger-bg: hsl(var(--destructive) / 0.1);
	--pct-danger-border: hsl(var(--destructive) / 0.3);

	/* Chart colours matching the ones the tool components draw with:
	   CPU blue, GPU green, RAM amber. */
	--pct-chart-1: hsl(var(--primary));
	--pct-chart-2: hsl(var(--success));
	--pct-chart-3: hsl(var(--warning));
	--pct-chart-4: hsl(var(--destructive));
	--pct-chart-5: hsl(262 83% 62%);
	--pct-chart-6: hsl(190 90% 50%);
	--pct-chart-grid: hsl(var(--border));
	--pct-chart-axis: hsl(var(--muted-foreground));
	--pct-chart-track: hsl(var(--muted));

	--pct-shadow-sm: var(--shadow-sm);
	--pct-shadow: var(--shadow-md);
	--pct-shadow-md: var(--shadow-md);
	--pct-shadow-lg: var(--shadow-lg);

	--pct-overlay: hsl(var(--foreground) / 0.45);
	--pct-skeleton: hsl(var(--muted));

	color-scheme: light;
}

@media (min-width: 640px) {
	:root {
		--pct-gutter: 1.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--pct-gutter: 2rem;
	}
}

/**
 * Dark theme.
 *
 * `.dark` is the class the source application's Tailwind build keys off, and
 * `[data-theme="dark"]` is what this theme's no-flash resolver sets. Both are
 * declared so the WordPress chrome and the mounted calculators always switch
 * together.
 */
:root.dark,
:root[data-theme="dark"] {
	--background: 222 47% 4%;
	--foreground: 210 40% 98%;
	--muted: 217 33% 17%;
	--muted-foreground: 215 20% 65%;
	--popover: 222 47% 5%;
	--popover-foreground: 210 40% 98%;
	--card: 222 47% 6%;
	--card-foreground: 210 40% 98%;
	--border: 217 33% 18%;
	--input: 217 33% 18%;

	--primary: 216 100% 60%;
	--primary-foreground: 210 40% 98%;

	--secondary: 217 33% 17%;
	--secondary-foreground: 210 40% 98%;

	--accent: 216 100% 60%;
	--accent-foreground: 210 40% 98%;

	--success: 142 71% 45%;
	--success-foreground: 210 40% 98%;
	--warning: 38 92% 50%;
	--warning-foreground: 222 47% 11%;
	--destructive: 0 70% 55%;
	--destructive-foreground: 210 40% 98%;

	--ring: 216 100% 65%;
	--radius: 0.5rem;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

	--pct-hero-glow: hsl(var(--primary) / 0.12);

	color-scheme: dark;
}

/* Visitors who have not chosen a mode follow the operating system. The inline
   resolver in the head normally settles this before paint; this covers the
   case where scripting is unavailable. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not(.light) {
		--background: 222 47% 4%;
		--foreground: 210 40% 98%;
		--muted: 217 33% 17%;
		--muted-foreground: 215 20% 65%;
		--popover: 222 47% 5%;
		--popover-foreground: 210 40% 98%;
		--card: 222 47% 6%;
		--card-foreground: 210 40% 98%;
		--border: 217 33% 18%;
		--input: 217 33% 18%;

		--primary: 216 100% 60%;
		--primary-foreground: 210 40% 98%;
		--secondary: 217 33% 17%;
		--secondary-foreground: 210 40% 98%;
		--accent: 216 100% 60%;
		--accent-foreground: 210 40% 98%;

		--success: 142 71% 45%;
		--warning: 38 92% 50%;
		--warning-foreground: 222 47% 11%;
		--destructive: 0 70% 55%;

		--ring: 216 100% 65%;

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);

		--pct-hero-glow: hsl(var(--primary) / 0.12);

		color-scheme: dark;
	}
}