@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;700&display=swap');

:root {
	/* Core Colors */
	--primary-h: 220;
	--primary-s: 100%;
	--primary-l: 50%;
	--primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-hover: hsl(var(--primary-h), var(--primary-s), 40%);

	--accent-h: 45;
	--accent-s: 100%;
	--accent-l: 50%;
	--accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-hover: #e6b800;

	--dark-navy: #161922;
	--dark-navy-light: #1c222d;
	--background-color: #ffffff;
	--foreground-color: #f8f9fa;
	--white-color: #ffffff;
	--black-color: #000000;

	/* Module Colors */
	--uncovery-color: #0bb783;
	--uncovery-hover: #09a375;
	--uncovery-dark: #0a9f74;
	--security-color: #0089f7;
	--security-hover: #0076d6;
	--security-dark: #0078d4;
	--threats-color: #A133FF;
	--threats-hover: #8a2be2;
	--threats-dark: #8b2fc9;

	/* Accent Variations */
	--accent-30: rgba(255, 204, 0, 0.3);
	--accent-35: rgba(255, 204, 0, 0.35);
	--accent-40: rgba(255, 204, 0, 0.4);

	/* Opacity Tokens (Light Mode) */
	--black-05: rgba(0, 0, 0, 0.05);
	--black-06: rgba(0, 0, 0, 0.06);
	--black-08: rgba(0, 0, 0, 0.08);
	--black-10: rgba(0, 0, 0, 0.1);
	--black-12: rgba(0, 0, 0, 0.12);
	--black-20: rgba(0, 0, 0, 0.2);
	--black-25: rgba(0, 0, 0, 0.25);
	--black-30: rgba(0, 0, 0, 0.3);
	--black-40: rgba(0, 0, 0, 0.4);
	--black-50: rgba(0, 0, 0, 0.5);
	--white-05: rgba(255, 255, 255, 0.05);
	--white-08: rgba(255, 255, 255, 0.08);
	--white-10: rgba(255, 255, 255, 0.1);
	--white-12: rgba(255, 255, 255, 0.12);
	--white-15: rgba(255, 255, 255, 0.15);
	--white-20: rgba(255, 255, 255, 0.2);
	--white-30: rgba(255, 255, 255, 0.3);
	--white-40: rgba(255, 255, 255, 0.4);
	--white-50: rgba(255, 255, 255, 0.5);
	--white-70: rgba(255, 255, 255, 0.7);
	--white-85: rgba(255, 255, 255, 0.85);
	--white-90: rgba(255, 255, 255, 0.9);
	--white-95: rgba(255, 255, 255, 0.95);

	/* Module Opacity Tokens */
	--uncovery-05: rgba(11, 183, 131, 0.05);
	--uncovery-10: rgba(11, 183, 131, 0.1);
	--uncovery-12: rgba(11, 183, 131, 0.12);
	--uncovery-15: rgba(11, 183, 131, 0.15);
	--uncovery-20: rgba(11, 183, 131, 0.2);
	--uncovery-30: rgba(11, 183, 131, 0.3);
	--security-05: rgba(0, 137, 247, 0.05);
	--security-10: rgba(0, 137, 247, 0.1);
	--security-12: rgba(0, 137, 247, 0.12);
	--security-15: rgba(0, 137, 247, 0.15);
	--security-40: rgba(0, 137, 247, 0.4);
	--threats-05: rgba(161, 51, 255, 0.05);
	--threats-10: rgba(161, 51, 255, 0.1);
	--threats-12: rgba(161, 51, 255, 0.12);
	--threats-15: rgba(161, 51, 255, 0.15);
	--threats-20: rgba(161, 51, 255, 0.2);
	--threats-40: rgba(161, 51, 255, 0.4);

	/* Gradient Variations */
	--uncovery-light: #20d489;
	--security-light: #4da3ff;
	--threats-light: #c480ff;

	/* UI Component Tokens */
	--browser-red: #ff5f57;
	--browser-yellow: #ffbd2e;
	--browser-green: #28c840;

	--testimonial-primary: #5542E8;
	--testimonial-text: #424268;

	/* Glassmorphism Tokens */
	--glass-bg: hsla(0, 0%, 100%, 0.7);
	--glass-border: hsla(240, 10%, 90%, 0.8);
	--glass-blur: blur(16px);
	--glass-shadow: 0 10px 40px -10px rgba(22, 25, 34, 0.08);

	/* Typography */
	--font-heading: 'Outfit', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Text Colors */
	--text-primary: #161922;
	--text-secondary: #626262;
	--text-muted: #808090;

	/* Spacing & Borders */
	--radius-lg: 20px;
	--radius-md: 12px;
	--radius-sm: 8px;
	--radius-full: 9999px;

	--space-container: 1200px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;

	/* Semantic Colors */
	--border-color: #e5e7eb;
	--card-bg: #ffffff;
	--success-color: #10b981;
	--error-color: #ef4444;

	/* Grays */
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;

}

[data-theme="dark"] {
	--primary-color: #0089f7;
	--background-color: #1a1a1f;
	--foreground-color: #242429;
	--text-primary: #ffffff;
	--text-secondary: #b0b0b0;
	--glass-bg: hsla(240, 10%, 15%, 0.8);
	--glass-border: hsla(240, 10%, 25%, 0.5);
}