/**
 * CSS Custom Properties (Variables)
 * Modern Ocean Gradient Design System
 *
 * Complete redesign with Ocean Gradient palette, glassmorphism effects,
 * and elegant 75/25 dark/light balance with smooth transitions.
 *
 * @package Techtronic_Learning
 * @since 1.0.0 (Redesigned 2025)
 */

:root {
	/* === OCEAN GRADIENT COLOR PALETTE === */

	/* Primary - Ocean Blue to Teal Gradient */
	--primary-950: #020617;        /* Deep Navy - Darkest background */
	--primary-900: #0c4a6e;        /* Deep Ocean */
	--primary-800: #075985;        /* Ocean Dark */
	--primary-700: #0369a1;        /* Ocean Blue */
	--primary-600: #0891b2;        /* Teal Blue (Main) */
	--primary-500: #06b6d4;        /* Cyan */
	--primary-400: #22d3ee;        /* Bright Cyan */
	--primary-300: #67e8f9;        /* Light Cyan */
	--primary-200: #a5f3fc;        /* Very Light Cyan */
	--primary-100: #cffafe;        /* Cyan Whisper */

	/* Accent - Modern Coral/Orange */
	--accent-900: #c2410c;         /* Deep Coral */
	--accent-800: #ea580c;         /* Dark Coral */
	--accent-700: #f97316;         /* Modern Orange (Main) */
	--accent-600: #fb923c;         /* Coral */
	--accent-500: #fdba74;         /* Light Coral */
	--accent-400: #fed7aa;         /* Very Light Coral */
	--accent-300: #ffedd5;         /* Coral Tint */

	/* Dark Surfaces (75% of interface) - Navy Gradient */
	--surface-0: #020617;          /* Deep Navy (Darkest) */
	--surface-1: #0f172a;          /* Navy */
	--surface-2: #1e293b;          /* Slate Navy */
	--surface-3: #334155;          /* Slate */
	--surface-4: #475569;          /* Light Slate */

	/* Light Surfaces (25% of interface) - Ocean-tinted Light */
	--surface-light-0: #f0f9ff;    /* Ocean Sky - subtle cyan tint */
	--surface-light-1: #ffffff;    /* Pure White */
	--surface-light-2: #e0f2fe;    /* Light Ocean Tint */
	--surface-light-3: #bae6fd;    /* Soft Cyan */

	/* Glassmorphism - Semi-transparent surfaces */
	--glass-dark: rgba(15, 23, 42, 0.7);      /* Navy with transparency */
	--glass-light: rgba(255, 255, 255, 0.1);  /* White with transparency */
	--glass-border: rgba(255, 255, 255, 0.15); /* Subtle border */

	/* Neutral Grays - Cool-toned */
	--gray-950: #020617;
	--gray-900: #0f172a;
	--gray-800: #1e293b;
	--gray-700: #334155;
	--gray-600: #475569;
	--gray-500: #64748b;
	--gray-400: #94a3b8;
	--gray-300: #cbd5e1;
	--gray-200: #e2e8f0;
	--gray-100: #f1f5f9;
	--gray-50: #f8fafc;

	/* Semantic Colors - Success (Emerald) */
	--success-900: #064e3b;
	--success-700: #047857;
	--success-600: #059669;
	--success-500: #10b981;        /* Main Success */
	--success-400: #34d399;
	--success-200: #a7f3d0;
	--success-100: #d1fae5;

	/* Semantic Colors - Error (Red) */
	--error-900: #7f1d1d;
	--error-700: #b91c1c;
	--error-600: #dc2626;
	--error-500: #ef4444;          /* Main Error */
	--error-400: #f87171;
	--error-200: #fecaca;
	--error-100: #fee2e2;

	/* Semantic Colors - Warning (Amber) */
	--warning-900: #78350f;
	--warning-700: #b45309;
	--warning-600: #d97706;
	--warning-500: #f59e0b;        /* Main Warning */
	--warning-400: #fbbf24;
	--warning-200: #fde68a;
	--warning-100: #fef3c7;

	/* Semantic Colors - Info (Sky Blue) */
	--info-900: #0c4a6e;
	--info-700: #0369a1;
	--info-600: #0284c7;
	--info-500: #0ea5e9;           /* Main Info */
	--info-400: #38bdf8;
	--info-200: #bae6fd;
	--info-100: #e0f2fe;

	/* === TYPOGRAPHY === */

	/* Font Families - Modern & Clean */
	--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

	/* Font Sizes - Modular Scale (Reduced for elegance) */
	--text-xs: 0.75rem;      /* 12px */
	--text-sm: 0.8125rem;    /* 13px - reduced from 14px */
	--text-base: 0.9375rem;  /* 15px - reduced from 16px */
	--text-lg: 1.0625rem;    /* 17px - reduced from 18px */
	--text-xl: 1.125rem;     /* 18px - reduced from 20px */
	--text-2xl: 1.375rem;    /* 22px - reduced from 24px */
	--text-3xl: 1.75rem;     /* 28px - reduced from 32px */
	--text-4xl: 2.25rem;     /* 36px - reduced from 40px */
	--text-5xl: 2.75rem;     /* 44px - reduced from 48px */
	--text-6xl: 3.25rem;     /* 52px - reduced from 56px */
	--text-7xl: 4rem;        /* 64px - reduced from 72px */

	/* Font Weights (Reduced for smoother look) */
	--weight-normal: 400;
	--weight-medium: 500;     /* keep at 500 for Inter */
	--weight-semibold: 500;   /* reduced from 600 to 500 */
	--weight-bold: 600;       /* reduced from 700 to 600 */
	--weight-extrabold: 700;  /* reduced from 800 to 700 */
	--weight-black: 800;      /* reduced from 900 to 800 */

	/* Line Heights */
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-normal: 1.5;
	--leading-relaxed: 1.625;
	--leading-loose: 2;

	/* Text Colors - On Dark Surfaces */
	--text-heading-dark: var(--gray-50);       /* Brightest for headings */
	--text-body-dark: var(--gray-100);         /* Body text on dark */
	--text-secondary-dark: var(--gray-300);    /* Secondary text */
	--text-tertiary-dark: var(--gray-400);     /* Tertiary/muted */
	--text-disabled-dark: var(--gray-500);     /* Disabled state */

	/* Legacy Text Colors - On Dark (for backward compatibility) */
	--text-primary-dark: var(--gray-50);       /* Alias for heading */
	--text-muted-dark: var(--gray-400);        /* Alias for tertiary */

	/* Text Colors - On Light Surfaces */
	--text-heading-light: var(--gray-900);     /* Darkest for headings */
	--text-body-light: var(--gray-700);        /* Body text on light */
	--text-secondary-light: var(--gray-600);   /* Secondary text */
	--text-tertiary-light: var(--gray-500);    /* Tertiary/muted */
	--text-disabled-light: var(--gray-400);    /* Disabled state */

	/* Legacy Text Colors - On Light (for backward compatibility) */
	--text-primary-light: var(--gray-900);     /* Alias for heading */
	--text-muted-light: var(--gray-500);       /* Alias for tertiary */

	/* Border Colors */
	--border-color: var(--gray-200);           /* Default border on light */
	--border-color-dark: var(--gray-700);      /* Border on dark surfaces */
	--border-color-light: var(--gray-300);     /* Lighter border */

	/* === SPACING - 8-Point Grid === */

	--spacing-0: 0;
	--spacing-px: 1px;
	--spacing-0-5: 0.125rem;  /* 2px */
	--spacing-1: 0.25rem;     /* 4px */
	--spacing-2: 0.5rem;      /* 8px */
	--spacing-3: 0.75rem;     /* 12px */
	--spacing-4: 1rem;        /* 16px */
	--spacing-5: 1.25rem;     /* 20px */
	--spacing-6: 1.5rem;      /* 24px */
	--spacing-7: 1.75rem;     /* 28px */
	--spacing-8: 2rem;        /* 32px */
	--spacing-10: 2.5rem;     /* 40px */
	--spacing-12: 3rem;       /* 48px */
	--spacing-16: 4rem;       /* 64px */
	--spacing-20: 5rem;       /* 80px */
	--spacing-24: 6rem;       /* 96px */
	--spacing-32: 8rem;       /* 128px */

	/* Legacy Spacing Names (for backward compatibility) */
	--spacing-xs: var(--spacing-1);      /* 4px */
	--spacing-sm: var(--spacing-2);      /* 8px */
	--spacing-md-: var(--spacing-3);     /* 12px */
	--spacing-md: var(--spacing-4);      /* 16px */
	--spacing-lg: var(--spacing-6);      /* 24px */
	--spacing-xl: var(--spacing-8);      /* 32px */
	--spacing-2xl: var(--spacing-10);    /* 40px */
	--spacing-3xl: var(--spacing-12);    /* 48px */
	--spacing-4xl: var(--spacing-16);    /* 64px */
	--spacing-5xl: var(--spacing-20);    /* 80px */
	--spacing-6xl: var(--spacing-24);    /* 96px */
	--spacing-7xl: var(--spacing-32);    /* 128px */

	/* === BORDER RADIUS - Softer Corners === */

	--radius-none: 0;
	--radius-sm: 0.5rem;      /* 8px */
	--radius-md: 0.75rem;     /* 12px */
	--radius-lg: 1rem;        /* 16px */
	--radius-xl: 1.5rem;      /* 24px */
	--radius-2xl: 2rem;       /* 32px */
	--radius-full: 9999px;    /* Fully rounded */

	/* === SHADOWS & GLOWS - Soft & Modern === */

	/* Soft Shadows (Dark Mode) */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
	--shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 10px 15px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
	--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.15);
	--shadow-2xl: 0 30px 60px rgba(0, 0, 0, 0.4), 0 15px 30px rgba(0, 0, 0, 0.2);

	/* Colored Glows */
	--glow-primary: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(6, 182, 212, 0.15);
	--glow-accent: 0 0 20px rgba(249, 115, 22, 0.3), 0 0 40px rgba(249, 115, 22, 0.15);
	--glow-success: 0 0 20px rgba(16, 185, 129, 0.3), 0 0 40px rgba(16, 185, 129, 0.15);

	/* Glassmorphism Shadow */
	--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4),
	                inset 0 1px 0 rgba(255, 255, 255, 0.1);

	/* === TRANSITIONS & ANIMATIONS === */

	/* Duration */
	--duration-instant: 100ms;
	--duration-fast: 150ms;
	--duration-base: 200ms;
	--duration-slow: 300ms;
	--duration-slower: 400ms;
	--duration-slowest: 600ms;

	/* Easing Functions - Smooth & Natural */
	--ease-linear: linear;
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* === LAYOUT === */

	/* Container Widths */
	--container-full: 100%;
	--container-wide: 1400px;
	--container-standard: 1200px;
	--container-narrow: 800px;
	--container-compact: 600px;

	/* Container Padding */
	--container-padding-mobile: var(--spacing-6);   /* 24px */
	--container-padding-desktop: var(--spacing-12); /* 48px */

	/* Grid */
	--grid-columns: 12;
	--grid-gutter: var(--spacing-6);  /* 24px */

	/* Section Padding */
	--section-padding-mobile: var(--spacing-12);   /* 48px */
	--section-padding-desktop: var(--spacing-20);  /* 80px */

	/* Navbar */
	--navbar-height: 64px;  /* Sleek, reduced from typical 80px */

	/* === BACKDROP BLUR === */

	--blur-none: 0;
	--blur-sm: 4px;
	--blur-md: 12px;
	--blur-lg: 20px;
	--blur-xl: 40px;

	/* === Z-INDEX LAYERS === */

	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1100;
	--z-fixed: 1200;
	--z-modal-backdrop: 1300;
	--z-modal: 1400;
	--z-popover: 1500;
	--z-tooltip: 1600;

	/* === GRADIENTS === */

	/* Ocean Gradient - Main */
	--gradient-ocean: linear-gradient(
		135deg,
		var(--primary-900) 0%,
		var(--primary-700) 50%,
		var(--primary-600) 100%
	);

	/* Ocean to Coral */
	--gradient-ocean-coral: linear-gradient(
		135deg,
		var(--primary-800) 0%,
		var(--primary-600) 50%,
		var(--accent-700) 100%
	);

	/* Subtle Background Gradients */
	--gradient-dark-subtle: linear-gradient(
		180deg,
		var(--surface-0) 0%,
		var(--surface-1) 100%
	);

	--gradient-light-subtle: linear-gradient(
		180deg,
		var(--surface-light-0) 0%,
		var(--surface-light-1) 100%
	);

	/* Mesh Gradient for Hero */
	--gradient-mesh:
		radial-gradient(at 0% 0%, var(--primary-900) 0px, transparent 50%),
		radial-gradient(at 100% 0%, var(--primary-800) 0px, transparent 50%),
		radial-gradient(at 100% 100%, var(--primary-700) 0px, transparent 50%),
		radial-gradient(at 0% 100%, var(--primary-900) 0px, transparent 50%);
}

/* === DARK MODE OVERRIDES (Future-proofing) === */

@media (prefers-color-scheme: dark) {
	:root {
		/* Already optimized for dark mode */
	}
}

/* === LIGHT MODE OVERRIDES === */

@media (prefers-color-scheme: light) {
	:root {
		/* Keep dark mode as default */
	}
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-instant: 0ms;
		--duration-fast: 0ms;
		--duration-base: 0ms;
		--duration-slow: 0ms;
		--duration-slower: 0ms;
		--duration-slowest: 0ms;
	}

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

/* === HIGH CONTRAST MODE === */

@media (prefers-contrast: high) {
	:root {
		--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
		--shadow-base: 0 4px 8px rgba(0, 0, 0, 0.6);
		--shadow-md: 0 6px 12px rgba(0, 0, 0, 0.7);
		--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.8);
	}
}