/**
 * Color System - Ernesto Theme
 * Modern color definitions with automatic dark mode support
 * Uses light-dark() function for native system theme switching
 *
 * @package Ernesto
 * @since 1.0.0
 */

:root {
	/* ============================================
	   1. ENABLE SYSTEM THEME SWITCHING
	   ============================================ */
	color-scheme: light dark;

	/* ============================================
	   2. BRAND & ACTION COLORS
	   We use light-dark(lightValue, darkValue) to define both states at once.
	   ============================================ */
	--color-primary: light-dark(#0066FF, #4D94FF);
	--color-primary-hover: light-dark(#0052CC, #80B3FF);
	--color-primary-dark: light-dark(#003D99, #3380FF);
	--color-primary-light: light-dark(#3385FF, #99C7FF);

	--color-secondary: light-dark(#6C757D, #ADB5BD);
	--color-secondary-hover: light-dark(#5A6268, #CED4DA);

	--color-accent: light-dark(#FF3366, #FF6688);
	--color-accent-hover: light-dark(#E6004C, #FF99B3);

	/* ============================================
	   3. SURFACE & BACKGROUNDS
	   ============================================ */
	--bg-body: light-dark(#FFFFFF, #121212);           /* Main background */
	--bg-surface: light-dark(#F8F9FA, #1E1E1E);        /* Cards / Sidebars */
	--bg-alt: light-dark(#E9ECEF, #2A2A2A);            /* Alternating sections */
	--bg-hover: light-dark(#F1F3F5, #333333);          /* Hover states */
	--bg-overlay: light-dark(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); /* Modals/overlays */

	--border-color: light-dark(#DEE2E6, #333333);      /* Dividers & Borders */
	--border-light: light-dark(#E9ECEF, #2A2A2A);      /* Lighter borders */
	--border-dark: light-dark(#CED4DA, #444444);       /* Darker borders */

	/* ============================================
	   4. TYPOGRAPHY (WCAG 2.2 Compliant Contrast)
	   ============================================ */
	--text-main: light-dark(#1A1A1B, #E4E6EB);         /* Body paragraphs */
	--text-heading: light-dark(#000000, #FFFFFF);      /* H1-H6 */
	--text-muted: light-dark(#65676B, #B0B3B8);        /* Captions / Meta info */
	--text-disabled: light-dark(#ADB5BD, #666666);     /* Disabled state */
	--text-on-brand: #FFFFFF;                          /* Text inside primary buttons */
	--text-on-dark: #FFFFFF;                           /* Text on dark backgrounds */
	--text-on-light: #000000;                          /* Text on light backgrounds */

	/* Link colors */
	--link-color: var(--color-primary);
	--link-hover: var(--color-primary-hover);
	--link-visited: light-dark(#551A8B, #BB86FC);

	/* ============================================
	   5. SEMANTIC / SYSTEM STATUS
	   ============================================ */
	--color-success: light-dark(#28A745, #34C759);
	--color-success-bg: light-dark(#D4EDDA, #1B3A23);
	--color-success-text: light-dark(#155724, #34C759);

	--color-error: light-dark(#DC3545, #FF453A);
	--color-error-bg: light-dark(#F8D7DA, #3A1B1C);
	--color-error-text: light-dark(#721C24, #FF453A);

	--color-warning: light-dark(#FFC107, #FFD60A);
	--color-warning-bg: light-dark(#FFF3CD, #3A3420);
	--color-warning-text: light-dark(#856404, #FFD60A);

	--color-info: light-dark(#17A2B8, #64D2FF);
	--color-info-bg: light-dark(#D1ECF1, #1B2F3A);
	--color-info-text: light-dark(#0C5460, #64D2FF);

	/* ============================================
	   6. COMPONENT-SPECIFIC COLORS
	   ============================================ */

	/* Buttons */
	--btn-primary-bg: var(--color-primary);
	--btn-primary-hover: var(--color-primary-hover);
	--btn-primary-text: var(--text-on-brand);

	--btn-secondary-bg: var(--color-secondary);
	--btn-secondary-hover: var(--color-secondary-hover);
	--btn-secondary-text: var(--text-on-brand);

	/* Forms */
	--input-bg: light-dark(#FFFFFF, #2A2A2A);
	--input-border: var(--border-color);
	--input-border-primary: light-dark(
		rgba(0, 102, 255, 0.7),
		rgba(77, 148, 255, 0.7)
	);
	--input-border-primary-active: light-dark(
		rgba(0, 102, 255, 1),
		rgba(77, 148, 255, 1)
	);
	--input-border-focus: var(--color-primary);
	--input-text: var(--text-main);
	--input-placeholder: var(--text-muted);

	/* Navigation */
	--nav-bg: light-dark(#FFFFFF, #1E1E1E);
	--nav-text: var(--text-main);
	--nav-hover-bg: var(--bg-hover);
	--nav-active-bg: var(--bg-alt);
	--nav-border: var(--border-color);

	/* Footer */
	--footer-bg: light-dark(#212529, #0A0A0A);
	--footer-text: light-dark(#ADB5BD, #CED4DA);
	--footer-heading: light-dark(#FFFFFF, #FFFFFF);
	--footer-link: light-dark(#CBD5E1, #CBD5E1);
	--footer-link-hover: var(--color-primary-light);

	/* Cards */
	--card-bg: var(--bg-surface);
	--card-border: var(--border-color);
	--card-shadow: light-dark(
		rgba(0, 0, 0, 0.1),
		rgba(0, 0, 0, 0.3)
	);

	/* WooCommerce */
	--woo-price-color: light-dark(#222222, #E4E6EB);
	--woo-sale-color: var(--color-error);
	--woo-rating-color: light-dark(#FFC107, #FFD60A);
	--woo-badge-bg: var(--color-accent);
	--woo-button-bg: var(--color-primary);
	--woo-button-hover: var(--color-primary-hover);

	/* ============================================
	   7. SHADOWS & EFFECTS
	   ============================================ */
	--shadow-sm: light-dark(
		0 1px 2px 0 rgba(0, 0, 0, 0.05),
		0 1px 2px 0 rgba(0, 0, 0, 0.3)
	);

	--shadow-md: light-dark(
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 4px 6px -1px rgba(0, 0, 0, 0.4)
	);

	--shadow-lg: light-dark(
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 10px 15px -3px rgba(0, 0, 0, 0.5)
	);

	--shadow-xl: light-dark(
		0 20px 25px -5px rgba(0, 0, 0, 0.1),
		0 20px 25px -5px rgba(0, 0, 0, 0.6)
	);

	/* Focus ring for accessibility */
	--focus-ring: 0 0 0 3px light-dark(
		rgba(0, 102, 255, 0.2),
		rgba(77, 148, 255, 0.3)
	);

	/* ============================================
	   8. OPACITY VALUES
	   ============================================ */
	--opacity-disabled: 0.5;
	--opacity-hover: 0.8;
	--opacity-overlay: 0.9;
}

/* ============================================
   FORCED LIGHT MODE (Optional Override)
   Add .light-mode class to <html> or <body>
   ============================================ */
.light-mode {
	color-scheme: light;

	--color-primary: #0066FF;
	--color-primary-hover: #0052CC;
	--bg-body: #FFFFFF;
	--bg-surface: #F8F9FA;
	--text-main: #1A1A1B;
	--text-heading: #000000;
	/* Override other vars as needed */
}

/* ============================================
   FORCED DARK MODE (Optional Override)
   Add .dark-mode class to <html> or <body>
   ============================================ */
.dark-mode {
	color-scheme: dark;

	--color-primary: #4D94FF;
	--color-primary-hover: #80B3FF;
	--bg-body: #121212;
	--bg-surface: #1E1E1E;
	--text-main: #E4E6EB;
	--text-heading: #FFFFFF;
	/* Override other vars as needed */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
	:root {
		color-scheme: light;
		--bg-body: #FFFFFF;
		--text-main: #000000;
		--text-heading: #000000;
		/* Force light colors for printing */
	}
}