@import 'tailwindcss';

@theme {
	--font-sans: 'InterVariable', 'system-ui', sans-serif, ui-sans-serif;
	--font-mono:
		'IBMPlexMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
		'Courier New', monospace;
	--color-bg: #f1f5f9;
	--color-bg-auth: #ffffff;
	--color-surface: #ffffff;
	--color-surface-hover: #f9fafb;
	--color-surface-muted: #f3f4f6;
	--color-fg: #111827;
	--color-fg-strong: #030712;
	--color-fg-muted: #4b5563;
	--color-fg-subtle: #6b7280;
	--color-fg-faint: #9ca3af;
	--color-border: #e5e7eb;
	--color-border-subtle: #f3f4f6;
	--color-border-strong: #d1d5db;
	--color-ring: #d1d5db;
	--color-raised-depth: #e5e7eb;
	--color-raised-accent-depth: rgb(17 24 39 / 0.25);
	--color-raised-accent-depth-active: rgb(17 24 39 / 0.5);
	--color-raised-depth-hover: #d1d5db;
	--color-success: #16a34a;
	--color-success-hover: #15803d;
	--color-success-border: #15803d;
	--color-success-fg: #ffffff;
	--color-primary: #4f46e5;
	--color-primary-hover: #4338ca;
	--color-primary-border: #4338ca;
	--color-primary-fg: #ffffff;
	--color-info: #3b82f6;
	--color-info-soft: #dbeafe;
	--color-danger: #dc2626;
	--color-danger-hover: #b91c1c;
	--color-danger-border: #b91c1c;
	--color-danger-fg: #ffffff;
	--color-danger-soft: #fef2f2;
	--shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@layer base {
	@font-face {
		font-family: 'InterVariable';
		src: url('/fonts/InterVariable.woff2') format('woff2-variations');
		font-weight: 100 600;
		font-style: normal;
		font-display: swap;
	}

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

	@font-face {
		font-family: 'InterVariable';
		src: url('/fonts/InterDisplay-Bold.woff2') format('woff2');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'InterVariable';
		src: url('/fonts/InterDisplay-BoldItalic.woff2') format('woff2');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'IBMPlexMono';
		src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'IBMPlexMono';
		src: url('/fonts/IBMPlexMono-Italic.woff2') format('woff2');
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}

	@font-face {
		font-family: 'IBMPlexMono';
		src: url('/fonts/IBMPlexMono-Bold.woff2') format('woff2');
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: 'IBMPlexMono';
		src: url('/fonts/IBMPlexMono-BoldItalic.woff2') format('woff2');
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}

	html {
		font-size: 16px;
		scrollbar-gutter: stable;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--color-bg: #111827;
			--color-bg-auth: #111827;
			--color-surface: #1f2937;
			--color-surface-hover: #374151;
			--color-surface-muted: #374151;
			--color-fg: #f3f4f6;
			--color-fg-strong: #ffffff;
			--color-fg-muted: #d1d5db;
			--color-fg-subtle: #9ca3af;
			--color-border: #374151;
			--color-border-subtle: #374151;
			--color-border-strong: #4b5563;
			--color-ring: #4b5563;
			--color-raised-depth: #111827;
			--color-raised-depth-hover: #1f2937;
			--color-success: #15803d;
			--color-success-hover: #166534;
			--color-success-border: #16a34a;
			--color-primary: #6366f1;
			--color-primary-hover: #4f46e5;
			--color-primary-border: #4f46e5;
			--color-info: #60a5fa;
			--color-info-soft: rgb(30 58 138 / 0.3);
			--color-danger: #b91c1c;
			--color-danger-hover: #991b1b;
			--color-danger-border: #dc2626;
			--color-danger-soft: rgb(153 27 27 / 0.2);
		}
	}

	body {
		@apply flex min-h-screen flex-col bg-bg text-fg transition-colors duration-200;
		font-size: 14px;
	}

	a {
		@apply text-fg no-underline hover:text-fg-muted;
	}
}