@import 'tailwindcss';

/* 
 * Semantic Color System - Green-hued theme optimized for Light/Dark Modes
 * Based on forest green palette with excellent contrast and readability
 */

:root {
	/* Light Mode - Darker, more subdued palette */
	--color-background: 237 247 237; /* Soft gray-green background */
	--color-surface: 220 242 220; /* Darker green-tinted surface */
	--color-surface-elevated: 200 230 200; /* Medium green surface */

	--color-text-primary: 5 46 22; /* green-950 - very dark forest green */
	--color-text-secondary: 22 101 52; /* green-800 */
	--color-text-tertiary: 21 128 61; /* green-700 */

	--color-border: 160 210 160; /* Darker green border */
	--color-border-strong: 120 190 120; /* Strong green border */

	/* Primary - Vibrant emerald for links/actions */
	--color-primary: 5 150 105; /* emerald-600 */
	--color-primary-hover: 4 120 87; /* emerald-700 */

	/* Success - Rich green */
	--color-success: 22 163 74; /* green-600 */
	--color-success-bg: 220 242 220; /* Darker green-50 */
	--color-success-border: 120 190 120; /* green-300 equivalent */

	/* Error - Strong red for visibility */
	--color-error: 185 28 28; /* red-700 - darker */
	--color-error-bg: 254 226 226; /* Darker red-100 */
	--color-error-border: 248 113 113; /* red-400 */

	/* Code blocks */
	--color-code-bg: 200 230 200; /* Darker green surface */
}

.dark {
	/* Dark Mode - Deep forest green with teal accents */
	--color-background: 3 15 10; /* Very dark forest green (almost black) */
	--color-surface: 5 30 20; /* Dark green-tinted */
	--color-surface-elevated: 10 50 35; /* Medium dark green */

	--color-text-primary: 240 253 244; /* green-50 - bright mint */
	--color-text-secondary: 187 247 208; /* green-200 */
	--color-text-tertiary: 134 239 172; /* green-300 */

	--color-border: 22 101 52; /* green-800 */
	--color-border-strong: 34 197 94; /* green-500 */

	/* Primary - Bright emerald for dark mode */
	--color-primary: 52 211 153; /* emerald-400 */
	--color-primary-hover: 110 231 183; /* emerald-300 */

	/* Success - Bright green for dark mode */
	--color-success: 74 222 128; /* green-400 */
	--color-success-bg: 5 46 22; /* green-950 */
	--color-success-border: 34 197 94; /* green-500 */

	/* Error - Softer red for dark mode */
	--color-error: 248 113 113; /* red-400 */
	--color-error-bg: 69 10 10; /* red-950 */
	--color-error-border: 220 38 38; /* red-600 */

	/* Code blocks */
	--color-code-bg: 5 30 20; /* Dark green-tinted */
}

/* Apply base background and text colors to html/body */
html {
	background-color: rgb(var(--color-background));
	color: rgb(var(--color-text-primary));
	min-height: 100vh;
	transition:
		background-color 0.3s ease,
		color 0.3s ease;
}

body {
	background-color: rgb(var(--color-background));
	color: rgb(var(--color-text-primary));
	min-height: 100vh;
}

/* Smooth transitions for color changes */
* {
	transition-property: background-color, border-color, color, fill, stroke;
	transition-duration: 0.2s;
	transition-timing-function: ease;
}

/* Preserve transform transitions */
*:where([style*='transform']) {
	transition-property: background-color, border-color, color, fill, stroke, transform;
}