@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

/* ============================================
   THEME COLOR SYSTEM
   ============================================
   Primary: Blue
   Secondary: Green
   Primary Accent: Orange
   Secondary Accent: Purple
   Alert/Error: Red
   Warning: Yellow
   Success: Green (distinct from secondary)
   ============================================ */

@theme {
	/* Primary - Blue (muted/professional) */
	--color-primary-50: #f0f6fc;
	--color-primary-100: #dbe8f7;
	--color-primary-200: #bdd4f0;
	--color-primary-300: #8fb8e5;
	--color-primary-400: #5a94d6;
	--color-primary-500: #3b78c4;
	--color-primary-600: #2d5fa6;
	--color-primary-700: #274d87;
	--color-primary-800: #254270;
	--color-primary-900: #23395e;
	--color-primary-950: #18253f;

	/* Secondary - Green (muted/professional) */
	--color-secondary-50: #f2f8f4;
	--color-secondary-100: #e0efe4;
	--color-secondary-200: #c3dfcc;
	--color-secondary-300: #96c7a6;
	--color-secondary-400: #65a97b;
	--color-secondary-500: #458c5e;
	--color-secondary-600: #33714a;
	--color-secondary-700: #2a5b3d;
	--color-secondary-800: #244933;
	--color-secondary-900: #1f3c2b;
	--color-secondary-950: #102118;

	/* Accent Primary - Orange (muted/professional) */
	--color-accent-50: #fdf6f0;
	--color-accent-100: #fbe9db;
	--color-accent-200: #f6d0b6;
	--color-accent-300: #f0b088;
	--color-accent-400: #e88958;
	--color-accent-500: #e16a36;
	--color-accent-600: #d2522b;
	--color-accent-700: #ae3f26;
	--color-accent-800: #8b3425;
	--color-accent-900: #712e22;
	--color-accent-950: #3d1510;

	/* Accent Secondary - Purple (muted/professional) */
	--color-accent2-50: #f6f4fb;
	--color-accent2-100: #ede9f7;
	--color-accent2-200: #ddd5f0;
	--color-accent2-300: #c5b6e4;
	--color-accent2-400: #a78fd4;
	--color-accent2-500: #8b6bc2;
	--color-accent2-600: #7652ab;
	--color-accent2-700: #634391;
	--color-accent2-800: #533978;
	--color-accent2-900: #463162;
	--color-accent2-950: #2c1c42;

	/* Error/Alert - Red (muted/professional) */
	--color-error-50: #fdf3f3;
	--color-error-100: #fce4e4;
	--color-error-200: #fbcdcd;
	--color-error-300: #f6a8a8;
	--color-error-400: #ee7676;
	--color-error-500: #e14a4a;
	--color-error-600: #cd2d2d;
	--color-error-700: #ac2323;
	--color-error-800: #8e2121;
	--color-error-900: #772222;
	--color-error-950: #400d0d;

	/* Warning - Yellow (muted/professional) */
	--color-warning-50: #fdfaeb;
	--color-warning-100: #faf2c9;
	--color-warning-200: #f5e394;
	--color-warning-300: #efd05b;
	--color-warning-400: #e8bb30;
	--color-warning-500: #d8a01d;
	--color-warning-600: #ba7c16;
	--color-warning-700: #955916;
	--color-warning-800: #7b4619;
	--color-warning-900: #693a1a;
	--color-warning-950: #3d1e0a;

	/* Success - Green (distinct from secondary, muted) */
	--color-success-50: #f0fdf2;
	--color-success-100: #dcfce2;
	--color-success-200: #bbf7c6;
	--color-success-300: #86ef9b;
	--color-success-400: #4ade6a;
	--color-success-500: #22c546;
	--color-success-600: #16a336;
	--color-success-700: #16802e;
	--color-success-800: #176528;
	--color-success-900: #155324;
	--color-success-950: #052e10;

	/* Neutral/Surface colors for theming */
	--color-surface-50: #f8fafc;
	--color-surface-100: #f1f5f9;
	--color-surface-200: #e2e8f0;
	--color-surface-300: #cbd5e1;
	--color-surface-400: #94a3b8;
	--color-surface-500: #64748b;
	--color-surface-600: #475569;
	--color-surface-700: #334155;
	--color-surface-800: #1e293b;
	--color-surface-900: #0f172a;
	--color-surface-950: #020617;
}

/* ============================================
   LIGHT THEME (default)
   ============================================ */
:root {
	color-scheme: light;

	/* Background colors - subtle blue tint for softer appearance */
	--theme-bg: var(--color-primary-50);
	--theme-bg-secondary: #e8f0f8;
	--theme-bg-tertiary: var(--color-primary-100);

	/* Text colors */
	--theme-text: var(--color-surface-900);
	--theme-text-secondary: var(--color-surface-600);
	--theme-text-muted: var(--color-surface-400);

	/* Border colors */
	--theme-border: var(--color-surface-200);
	--theme-border-hover: var(--color-surface-300);

	/* Interactive states */
	--theme-hover: var(--color-primary-100);
	--theme-active: var(--color-primary-200);

	/* Shadows */
	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Card/Panel backgrounds - subtle blue tint to match overall theme */
	--theme-card: #f5f8fc;
	--theme-card-hover: #edf2f9;
}

/* ============================================
   DARK THEME
   ============================================ */
.dark {
	color-scheme: dark;

	/* Background colors */
	--theme-bg: var(--color-surface-900);
	--theme-bg-secondary: var(--color-surface-800);
	--theme-bg-tertiary: var(--color-surface-700);

	/* Text colors */
	--theme-text: var(--color-surface-50);
	--theme-text-secondary: var(--color-surface-300);
	--theme-text-muted: var(--color-surface-500);

	/* Border colors */
	--theme-border: var(--color-surface-700);
	--theme-border-hover: var(--color-surface-600);

	/* Interactive states */
	--theme-hover: var(--color-surface-800);
	--theme-active: var(--color-surface-700);

	/* Shadows (more subtle in dark mode) */
	--theme-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
	--theme-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
	--theme-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);

	/* Card/Panel backgrounds */
	--theme-card: var(--color-surface-800);
	--theme-card-hover: var(--color-surface-700);
}

/* ============================================
   BASE STYLES
   ============================================ */
html {
	background-color: var(--theme-bg);
	color: var(--theme-text);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

body {
	background-color: var(--theme-bg);
	min-height: 100vh;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
@utility bg-theme {
	background-color: var(--theme-bg);
}

@utility bg-theme-secondary {
	background-color: var(--theme-bg-secondary);
}

@utility bg-theme-tertiary {
	background-color: var(--theme-bg-tertiary);
}

@utility bg-theme-card {
	background-color: var(--theme-card);
}

@utility text-theme {
	color: var(--theme-text);
}

@utility text-theme-secondary {
	color: var(--theme-text-secondary);
}

@utility text-theme-muted {
	color: var(--theme-text-muted);
}

@utility border-theme {
	border-color: var(--theme-border);
}

@utility border-theme-hover {
	border-color: var(--theme-border-hover);
}

@utility shadow-theme {
	box-shadow: var(--theme-shadow);
}

@utility shadow-theme-md {
	box-shadow: var(--theme-shadow-md);
}

@utility shadow-theme-lg {
	box-shadow: var(--theme-shadow-lg);
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Cards */
@utility card {
	@apply rounded-lg border;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

@utility card-padded {
	@apply rounded-lg border p-6;
	border-color: var(--theme-border);
	background-color: var(--theme-card);
}

/* Buttons */
@utility btn-primary {
	@apply inline-block rounded-lg bg-primary-500 px-4 py-2 font-medium text-white transition-colors hover:bg-primary-600 active:bg-primary-700;
}

@utility btn-danger {
	@apply inline-block rounded-lg bg-error-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-error-700 active:bg-error-800;
}

/* Form Input Borders (for checkboxes, radios) */
@utility border-input {
	@apply border-surface-300 dark:border-surface-600;
}

/* Interactive hover/active - unifies hover states */
@utility interactive {
	@apply transition-colors hover:bg-black/5 active:bg-black/10 dark:hover:bg-white/10 dark:active:bg-white/15;
}

/* Alert utilities */
@utility alert-error {
	@apply rounded-lg border border-error-400 bg-error-50 p-3 text-sm text-error-700 dark:border-error-600 dark:bg-error-900/20 dark:text-error-400;
}

@utility alert-success {
	@apply rounded-lg border border-success-400 bg-success-50 p-3 text-sm text-success-700 dark:border-success-600 dark:bg-success-900/20 dark:text-success-400;
}

/* Form utilities */
@utility input-base {
	@apply w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
}

@utility textarea-base {
	@apply w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme placeholder:text-theme-muted focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50;
}

@utility form-label {
	@apply mb-1.5 block text-sm font-medium text-theme;
}
