/**
 * Composable Svelte Theme System
 * CSS Variables for theming and dark mode support
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		/* ============================================
		 * COLORS (HSL format for Tailwind compatibility)
		 * ============================================ */

		/* Background & Foreground */
		--color-background: 0 0% 100%;
		--color-foreground: 222.2 84% 4.9%;

		/* Card */
		--color-card: 0 0% 100%;
		--color-card-foreground: 222.2 84% 4.9%;

		/* Popover */
		--color-popover: 0 0% 100%;
		--color-popover-foreground: 222.2 84% 4.9%;

		/* Primary */
		--color-primary: 222.2 47.4% 11.2%;
		--color-primary-foreground: 210 40% 98%;

		/* Secondary */
		--color-secondary: 210 40% 96.1%;
		--color-secondary-foreground: 222.2 47.4% 11.2%;

		/* Muted */
		--color-muted: 210 40% 96.1%;
		--color-muted-foreground: 215.4 16.3% 46.9%;

		/* Accent */
		--color-accent: 210 40% 96.1%;
		--color-accent-foreground: 222.2 47.4% 11.2%;

		/* Destructive */
		--color-destructive: 0 84.2% 60.2%;
		--color-destructive-foreground: 210 40% 98%;

		/* Border & Input */
		--color-border: 214.3 31.8% 91.4%;
		--color-input: 214.3 31.8% 91.4%;

		/* Ring (focus outline) */
		--color-ring: 222.2 84% 4.9%;

		/* Chart colors */
		--color-chart-1: 12 76% 61%;
		--color-chart-2: 173 58% 39%;
		--color-chart-3: 197 37% 24%;
		--color-chart-4: 43 74% 66%;
		--color-chart-5: 27 87% 67%;

		/* ============================================
		 * BORDER RADIUS
		 * ============================================ */
		--radius-sm: 0.125rem; /* 2px */
		--radius-md: 0.375rem; /* 6px */
		--radius-lg: 0.5rem; /* 8px */
		--radius-xl: 0.75rem; /* 12px */
		--radius-2xl: 1rem; /* 16px */
		--radius-full: 9999px;

		/* ============================================
		 * SHADOWS
		 * ============================================ */
		--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
		--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
		--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
		--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

		/* ============================================
		 * TRANSITIONS
		 * ============================================ */
		--transition-duration: 150ms;
		--transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* ============================================
	 * DARK MODE
	 * ============================================ */
	.dark {
		--color-background: 222.2 84% 4.9%;
		--color-foreground: 210 40% 98%;

		--color-card: 222.2 84% 4.9%;
		--color-card-foreground: 210 40% 98%;

		--color-popover: 222.2 84% 4.9%;
		--color-popover-foreground: 210 40% 98%;

		--color-primary: 210 40% 98%;
		--color-primary-foreground: 222.2 47.4% 11.2%;

		--color-secondary: 217.2 32.6% 17.5%;
		--color-secondary-foreground: 210 40% 98%;

		--color-muted: 217.2 32.6% 17.5%;
		--color-muted-foreground: 215 20.2% 65.1%;

		--color-accent: 217.2 32.6% 17.5%;
		--color-accent-foreground: 210 40% 98%;

		--color-destructive: 0 62.8% 30.6%;
		--color-destructive-foreground: 210 40% 98%;

		--color-border: 217.2 32.6% 17.5%;
		--color-input: 217.2 32.6% 17.5%;

		--color-ring: 212.7 26.8% 83.9%;

		--color-chart-1: 220 70% 50%;
		--color-chart-2: 160 60% 45%;
		--color-chart-3: 30 80% 55%;
		--color-chart-4: 280 65% 60%;
		--color-chart-5: 340 75% 55%;
	}

	/* ============================================
	 * BASE STYLES
	 * ============================================ */
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		font-feature-settings:
			'rlig' 1,
			'calt' 1;
	}
}