@import 'tailwindcss';
@import './lib/styles/themes.css';

/* Self-hosted Inter variable font */
@font-face {
	font-family: 'Inter';
	src: url('/fonts/InterVariable.woff2') format('woff2-variations'),
	     url('/fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
	     url('/fonts/InterVariable-Italic.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: italic;
}

@theme {
	/* Font Family */
	--font-family-sans:
		'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol', 'Noto Color Emoji';

	/* Ink - Slate-tinted text (230°) */
	--color-ink-50: light-dark(oklch(17.5% 0.012 230), oklch(97.6% 0.008 230));
	--color-ink-100: light-dark(oklch(25% 0.022 230), oklch(93.2% 0.017 230));
	--color-ink-200: light-dark(oklch(38.5% 0.037 230), oklch(85.2% 0.032 230));
	--color-ink-300: light-dark(oklch(50.5% 0.052 230), oklch(75.2% 0.048 230));
	--color-ink-400: light-dark(oklch(62% 0.065 230), oklch(65.2% 0.062 230));
	--color-ink-500: light-dark(oklch(73% 0.078 230), oklch(55.2% 0.078 230));
	--color-ink-600: light-dark(oklch(78% 0.062 230), oklch(45.2% 0.065 230));
	--color-ink-700: light-dark(oklch(83.5% 0.048 230), oklch(35.2% 0.052 230));
	--color-ink-800: light-dark(oklch(89% 0.032 230), oklch(25.2% 0.037 230));
	--color-ink-900: light-dark(oklch(94.5% 0.017 230), oklch(18.2% 0.022 230));
	--color-ink-950: light-dark(oklch(97.6% 0.008 230), oklch(12.5% 0.012 230));

	/* Canvas - Slate-tinted backgrounds (230°) */
	--color-canvas-50: light-dark(oklch(17.8% 0.014 230), oklch(98.6% 0.005 230));
	--color-canvas-100: light-dark(oklch(25.8% 0.025 230), oklch(96.6% 0.011 230));
	--color-canvas-200: light-dark(oklch(39.5% 0.042 230), oklch(92.5% 0.024 230));
	--color-canvas-300: light-dark(oklch(52% 0.058 230), oklch(86.5% 0.038 230));
	--color-canvas-400: light-dark(oklch(64% 0.072 230), oklch(80.5% 0.055 230));
	--color-canvas-500: light-dark(oklch(75.5% 0.085 230), oklch(75.5% 0.068 230));
	--color-canvas-600: light-dark(oklch(80.5% 0.055 230), oklch(64% 0.072 230));
	--color-canvas-700: light-dark(oklch(86.5% 0.038 230), oklch(52% 0.058 230));
	--color-canvas-800: light-dark(oklch(92.5% 0.024 230), oklch(39.5% 0.042 230));
	--color-canvas-900: light-dark(oklch(96.6% 0.011 230), oklch(25.8% 0.025 230));
	--color-canvas-950: light-dark(oklch(98.6% 0.005 230), oklch(17.8% 0.014 230));

	/* Slate - Primary colors (230°) */
	--color-primary-50: light-dark(oklch(18.2% 0.018 230), oklch(97.8% 0.012 230));
	--color-primary-100: light-dark(oklch(26.5% 0.03 230), oklch(94.8% 0.022 230));
	--color-primary-200: light-dark(oklch(40.5% 0.048 230), oklch(89.5% 0.042 230));
	--color-primary-300: light-dark(oklch(54% 0.065 230), oklch(79.5% 0.062 230));
	--color-primary-400: light-dark(oklch(66.5% 0.08 230), oklch(69.5% 0.078 230));
	--color-primary-500: light-dark(oklch(78.5% 0.095 230), oklch(59.5% 0.095 230));
	--color-primary-600: light-dark(oklch(82.2% 0.078 230), oklch(49.5% 0.08 230));
	--color-primary-700: light-dark(oklch(86.5% 0.062 230), oklch(39.5% 0.065 230));
	--color-primary-800: light-dark(oklch(91% 0.042 230), oklch(29.5% 0.048 230));
	--color-primary-900: light-dark(oklch(95.8% 0.022 230), oklch(21.5% 0.03 230));
	--color-primary-950: light-dark(oklch(98% 0.012 230), oklch(15.2% 0.018 230));

	/* Steel Grey - Secondary colors (215°) */
	--color-secondary-50: light-dark(oklch(18.5% 0.02 215), oklch(97.9% 0.013 215));
	--color-secondary-100: light-dark(oklch(26.8% 0.033 215), oklch(95% 0.024 215));
	--color-secondary-200: light-dark(oklch(41% 0.052 215), oklch(89.8% 0.045 215));
	--color-secondary-300: light-dark(oklch(54.5% 0.07 215), oklch(80.2% 0.065 215));
	--color-secondary-400: light-dark(oklch(67% 0.087 215), oklch(70.2% 0.082 215));
	--color-secondary-500: light-dark(oklch(79% 0.103 215), oklch(60.2% 0.103 215));
	--color-secondary-600: light-dark(oklch(82.8% 0.082 215), oklch(50.2% 0.087 215));
	--color-secondary-700: light-dark(oklch(87% 0.065 215), oklch(40.2% 0.07 215));
	--color-secondary-800: light-dark(oklch(91.5% 0.045 215), oklch(30.5% 0.052 215));
	--color-secondary-900: light-dark(oklch(96% 0.024 215), oklch(22.2% 0.033 215));
	--color-secondary-950: light-dark(oklch(98.2% 0.013 215), oklch(15.8% 0.02 215));

	/* Charcoal - Accent colors (240°) */
	--color-accent-50: light-dark(oklch(18.5% 0.022 240), oklch(98% 0.014 240));
	--color-accent-100: light-dark(oklch(26.8% 0.036 240), oklch(95.2% 0.026 240));
	--color-accent-200: light-dark(oklch(41% 0.058 240), oklch(90% 0.048 240));
	--color-accent-300: light-dark(oklch(54.5% 0.078 240), oklch(80.8% 0.072 240));
	--color-accent-400: light-dark(oklch(67% 0.097 240), oklch(71% 0.092 240));
	--color-accent-500: light-dark(oklch(79% 0.115 240), oklch(61% 0.115 240));
	--color-accent-600: light-dark(oklch(82.8% 0.092 240), oklch(51% 0.097 240));
	--color-accent-700: light-dark(oklch(87% 0.072 240), oklch(41% 0.078 240));
	--color-accent-800: light-dark(oklch(91.5% 0.048 240), oklch(31% 0.058 240));
	--color-accent-900: light-dark(oklch(96% 0.026 240), oklch(22.5% 0.036 240));
	--color-accent-950: light-dark(oklch(98.2% 0.014 240), oklch(16.2% 0.022 240));
}

@layer base {
	/* Base styles for consistent typography and accessibility */
	html {
		scroll-behavior: smooth;
		overflow-x: hidden;
		width: 100%;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
		}
	}

	body {
		font-family: var(--font-family-sans);
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		overflow-x: hidden;
		width: 100%;
		max-width: 100vw;
	}

	/* Skip to content link for keyboard navigation */
	.skip-to-content {
		position: absolute;
		left: -9999px;
		z-index: 999;
		padding: 1rem 1.5rem;
		background-color: var(--color-primary-600);
		color: white;
		font-weight: 600;
		text-decoration: none;
		border-radius: 0.5rem;
	}

	.skip-to-content:focus {
		left: 1rem;
		top: 1rem;
		outline: 2px solid var(--color-primary-800);
		outline-offset: 2px;
	}

	/* Focus visible styles for accessibility - Enhanced for better visibility */
	*:focus-visible {
		outline: 3px solid var(--color-primary-600);
		outline-offset: 2px;
		border-radius: 0.25rem;
	}

	/* High contrast mode support */
	@media (prefers-contrast: high) {
		*:focus-visible {
			outline-width: 4px;
		}
	}

	/* Ensure all elements stay within viewport */
	* {
		min-width: 0;
	}

	img,
	video,
	iframe,
	embed,
	object {
		max-width: 100%;
		height: auto;
	}

	/* Improve link accessibility */
	a {
		text-decoration-skip-ink: auto;
	}

	/* Better button accessibility */
	button:disabled {
		cursor: not-allowed;
	}

	/* Screen reader only utility */
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

@plugin '@tailwindcss/typography';