/**
 * LightEFX Common CSS Variables
 *
 * Shared CSS custom properties used across all LightEFX components.
 * Theme-agnostic styling that adapts to both light and dark themes automatically.
 *
 * @package LightEFX_Plugin
 * @since   1.4.13
 */

/* ============================================================================
   CSS Custom Properties for Theme Adaptation
   ========================================================================= */

:root {
  /* Primary accent color (brand color) */
  --lightefx-accent: #daa14c;
  --lightefx-accent-hover: #f0b970;
  --lightefx-accent-dark: #b8853d;
  --lightefx-accent-contrast: #1a1a1a;

  /* Success color */
  --lightefx-success: #4CAF50;

  /* Error color */
  --lightefx-error: #d93030;

  /* Surface colors - light theme defaults */
  --lightefx-surface-primary: #ffffff;
  --lightefx-surface-secondary: #f5f5f5;
  --lightefx-surface-tertiary: #e8e8e8;

  /* Text colors - light theme defaults */
  --lightefx-text-primary: #1a1a1a;
  --lightefx-text-secondary: #4a4a4a;
  --lightefx-text-muted: #6a6a6a;

  /* Border colors - light theme defaults */
  --lightefx-border-light: rgba(0, 0, 0, 0.1);
  --lightefx-border-medium: rgba(0, 0, 0, 0.2);
  --lightefx-border-strong: rgba(0, 0, 0, 0.3);

  /* Hover/focus states */
  --lightefx-hover-bg: rgba(0, 0, 0, 0.05);
  --lightefx-focus-outline: var(--lightefx-accent);
}

/* Dark theme adjustments - applies when prefers dark mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light-theme):not([data-theme="light"]) {
    --lightefx-surface-primary: #1a1a1a;
    --lightefx-surface-secondary: #2a2a2a;
    --lightefx-surface-tertiary: #353535;

    --lightefx-text-primary: #ffffff;
    --lightefx-text-secondary: #e0e0e0;
    --lightefx-text-muted: #b0b0b0;

    --lightefx-border-light: rgba(255, 255, 255, 0.1);
    --lightefx-border-medium: rgba(255, 255, 255, 0.2);
    --lightefx-border-strong: rgba(255, 255, 255, 0.3);

    --lightefx-hover-bg: rgba(255, 255, 255, 0.08);
  }
}

/* Explicit dark theme override */
body.dark-theme,
body.dark,
html[data-theme="dark"],
.dark-mode {
  --lightefx-surface-primary: #1a1a1a;
  --lightefx-surface-secondary: #2a2a2a;
  --lightefx-surface-tertiary: #353535;

  --lightefx-text-primary: #ffffff;
  --lightefx-text-secondary: #e0e0e0;
  --lightefx-text-muted: #b0b0b0;

  --lightefx-border-light: rgba(255, 255, 255, 0.1);
  --lightefx-border-medium: rgba(255, 255, 255, 0.2);
  --lightefx-border-strong: rgba(255, 255, 255, 0.3);

  --lightefx-hover-bg: rgba(255, 255, 255, 0.08);
}