/**
 * Design System CSS Variables
 * Centralized design tokens for consistent styling across the application
 */

/* === IBM Plex Sans Font === */
@font-face {
	font-display: swap;
	font-family: "IBM Plex Sans";
	font-style: normal;
	font-weight: 300;
	src: url("/fonts/ibm-plex-sans-v19-latin-300.woff2") format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "IBM Plex Sans";
	font-style: italic;
	font-weight: 300;
	src: url("/fonts/ibm-plex-sans-v19-latin-300italic.woff2") format("woff2");
}

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

:root {
	/* === Color Palette === */
	/* Primary Colors */
	--color-primary: rgb(185, 141, 181);
	--color-primary-dark: #4ca1af;
	--color-primary-light: #eeeeee;

	/* Accent & Action Colors */
	--color-accent: #2196f3;
	--color-accent-hover: #1976d2;

	/* Semantic Colors */
	--color-success: #4caf50;
	--color-success-light: #d4edda;
	--color-success-dark: #28a745;
	--color-warning: #ff9800;
	--color-warning-light: #fff3cd;
	--color-warning-dark: #856404;
	--color-danger: #f44336;
	--color-danger-bg: #ffebee;
	--color-danger-dark: #e53e3e;
	--color-error: #f44336;
	--color-error-dark: #721c24;
	--color-info: #2196f3;
	--color-info-dark: #0c5460;

	/* Neutral Colors */
	--color-text: #333;
	--color-text-secondary: #555;
	--color-text-tertiary: #666;
	--color-text-light: #718096;

	/* Background Colors */
	--color-bg: #f4f4f4;
	--color-bg-secondary: #efefef;
	--color-bg-tertiary: #e3e3e3;
	--color-bg-white: #ffffff;

	/* Border Colors */
	--color-border: #e0e0e0;
	--color-border-light: #f6f6f6;
	--color-border-dark: #cbd5e0;
	--color-border-focus: #667eea;

	/* Overlay Colors */
	--color-overlay-dark: rgba(0, 0, 0, 0.7);

	/* === Spacing Scale === */
	/* Fluid spacing that scales from mobile to desktop */
	--space-0: 0;
	--space-xs: clamp(
		0.25rem,
		calc(0.23rem + 0.11vw),
		0.31rem
	); /* 4px → 4.96px */
	--space-sm: clamp(0.5rem, calc(0.46rem + 0.18vw), 0.59rem); /* 8px → 9.44px */
	--space-md: clamp(
		0.75rem,
		calc(0.69rem + 0.26vw),
		0.89rem
	); /* 12px → 14.24px */
	--space-base: clamp(
		1rem,
		calc(0.93rem + 0.33vw),
		1.19rem
	); /* 16px → 19.04px */
	--space-lg: clamp(
		1.25rem,
		calc(1.16rem + 0.41vw),
		1.48rem
	); /* 20px → 23.68px */
	--space-xl: clamp(
		1.5rem,
		calc(1.39rem + 0.51vw),
		1.78rem
	); /* 24px → 28.48px */
	--space-2xl: clamp(
		1.88rem,
		calc(1.74rem + 0.64vw),
		2.23rem
	); /* 30px → 35.68px */
	--space-3xl: clamp(
		2rem,
		calc(1.85rem + 0.66vw),
		2.37rem
	); /* 32px → 37.92px */
	--space-4xl: clamp(
		2.5rem,
		calc(2.31rem + 0.88vw),
		2.97rem
	); /* 40px → 47.52px */
	--space-5xl: clamp(
		3rem,
		calc(2.78rem + 0.99vw),
		3.56rem
	); /* 48px → 56.96px */

	/* === Typography === */
	/* Font Families */
	--font-system: "IBM Plex Sans", Roboto, sans-serif;
	--font-monospace: "Courier New", Courier, monospace;

	/* Font Sizes - Fluid Typography (clamp-based) */
	/* Scales from mobile (352px) to desktop (1260px) */
	--font-size-xs: clamp(
		0.7rem,
		calc(0.65rem + 0.22vw),
		0.81rem
	); /* 11.20px → 12.96px */
	--font-size-sm: clamp(
		0.81rem,
		calc(0.76rem + 0.26vw),
		0.94rem
	); /* 12.96px → 15.04px */
	--font-size-base: clamp(
		1rem,
		calc(0.93rem + 0.33vw),
		1.19rem
	); /* 16.00px → 19.04px */
	--font-size-lg: clamp(
		1.13rem,
		calc(1.05rem + 0.37vw),
		1.34rem
	); /* 18.08px → 21.44px */
	--font-size-xl: clamp(
		1.25rem,
		calc(1.16rem + 0.41vw),
		1.48rem
	); /* 20.00px → 23.68px */
	--font-size-2xl: clamp(
		1.5rem,
		calc(1.39rem + 0.51vw),
		1.78rem
	); /* 24.00px → 28.48px */
	--font-size-3xl: clamp(
		1.88rem,
		calc(1.74rem + 0.64vw),
		2.23rem
	); /* 30.08px → 35.68px */
	--font-size-4xl: clamp(
		2.25rem,
		calc(2.09rem + 0.77vw),
		2.67rem
	); /* 36.00px → 42.72px */

	/* Font Weights - IBM Plex Sans available weights */
	--font-weight-light: 300; /* IBM Plex Sans Light */
	--font-weight-medium: 500; /* IBM Plex Sans Medium */

	/* Line Heights */
	--line-height-tight: 1.2;
	--line-height-normal: 1.4;

	/* === Shadows === */
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
	--shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.4);
	--shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.5);

	/* === Border Radius === */
	--radius-sm: 4px;
	--radius-md: 5px;
	--radius-lg: 8px;
	--radius-xl: 10px;

	/* === Transitions === */
	--transition-base: 0.2s ease;
	--transition-slow: 0.3s ease;

	/* === Z-Index Scale === */
	--z-dropdown: 1000;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;

	/* === Layout === */
	--container-max-width: 1200px;
	--container-padding: var(--space-lg);

	/* === Form Elements === */
	--input-height: 44px;
	--input-padding-x: 12px;
	--input-padding-y: 10px;
	--input-border-width: 2px;
	--button-min-height: 44px;

	/* === Gradients === */
	--gradient-primary: linear-gradient(
		135deg,
		var(--color-primary) 0%,
		var(--color-primary-dark) 100%
	);
}

/* === Dark Mode === */
/* Applies to both system preference AND manual toggle */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* Primary Colors - slightly lighter for dark mode */
		--color-primary: rgb(119, 71, 115);
		--color-primary-dark: #1c445a;
		--color-primary-light: #47536c;

		/* Text Colors - inverted */
		--color-text: #e2e8f0;
		--color-text-secondary: #cbd5e0;
		--color-text-tertiary: #a0aec0;
		--color-text-light: #718096;

		/* Background Colors - dark shades */
		--color-bg: #1a202c;
		--color-bg-secondary: #4a5568;
		--color-bg-tertiary: #525d72;
		--color-bg-white: #2d3748;

		/* Border Colors - darker */
		--color-border: #4a5568;
		--color-border-light: #374151;
		--color-border-dark: #718096;
		--color-border-focus: #7c8ef5;

		/* Overlay Colors - lighter for dark mode */
		--color-overlay-dark: rgba(0, 0, 0, 0.85);

		/* Semantic colors - adjusted for visibility */
		--color-success-light: #2f4f3f;
		--color-warning-light: #4a3c2a;
		--color-danger-bg: #3d2626;
	}
}

/* Manual dark mode toggle - forces dark mode even if system prefers light */
:root[data-theme="dark"] {
	/* Primary Colors */
	--color-primary: rgb(119, 71, 115);
	--color-primary-dark: #1c445a;
	--color-primary-light: #47536c;

	/* Text Colors */
	--color-text: #e2e8f0;
	--color-text-secondary: #cbd5e0;
	--color-text-tertiary: #a0aec0;
	--color-text-light: #718096;

	/* Background Colors */
	--color-bg: #1a202c;
	--color-bg-secondary: #4a5568;
	--color-bg-tertiary: #525d72;
	--color-bg-white: #2d3748;

	/* Border Colors */
	--color-border: #4a5568;
	--color-border-light: #374151;
	--color-border-dark: #718096;
	--color-border-focus: #7c8ef5;

	/* Overlay Colors */
	--color-overlay-dark: rgba(0, 0, 0, 0.85);

	/* Semantic colors */
	--color-success-light: #2f4f3f;
	--color-warning-light: #4a3c2a;
	--color-danger-bg: #3d2626;
}

/* === Base Resets === */
* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-system);
	font-size: var(--font-size-base);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background-color: var(--color-bg);
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
}

/* === Typography Base === */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-base) 0;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text);
}

h1 {
	font-size: var(--font-size-3xl);
}
h2 {
	font-size: var(--font-size-2xl);
}
h3 {
	font-size: var(--font-size-xl);
}
h4 {
	font-size: var(--font-size-lg);
}
h5 {
	font-size: var(--font-size-base);
}
h6 {
	font-size: var(--font-size-sm);
}

p {
	margin: 0 0 var(--space-base) 0;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-base);
}

a:hover {
	color: var(--color-accent-hover);
}

/* === Focus Styles (Accessibility) === */
:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* === Screen Reader Only / Visually Hidden === */
.sr-only,
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus,
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	white-space: normal;
}