/* EidosUI - Main CSS File */
/* Import this file to use EidosUI in your project */

/* 1. Base Variables (always load first) */
@import 'eidos-variables.css';

/* 2. Component Styles */
@import 'eidos-components.css';

/* 3. Theme Files (user can choose which to import) */
/* Default is light theme (defined in variables) */
/* To use dark theme, add data-theme="dark" to html element */
/* To use custom themes, import them and add corresponding data-theme attribute */

/* Optional theme imports - uncomment as needed */
/* @import 'themes/light.css'; */
/* @import 'themes/dark.css'; */
/* @import 'themes/artist.css'; */

/* Utility Classes */
.eidos-theme-light {
  color-scheme: light;
}

.eidos-theme-dark {
  color-scheme: dark;
}

/* Theme Switcher Helper */
.eidos-theme-auto {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  .eidos-theme-auto {
    /* Apply dark theme variables */
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-light: #1e3a8a;
    --color-primary-dark: #2563eb;
    --color-primary-foreground: #0f172a;
    
    --color-secondary: #9ca3af;
    --color-secondary-hover: #d1d5db;
    --color-secondary-light: #374151;
    --color-secondary-dark: #e5e7eb;
    --color-secondary-foreground: #0f172a;
    
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-surface-elevated: #334155;
    --color-border: #334155;
    --color-border-hover: #475569;
    --color-input: #1e293b;
    --color-card: #1e293b;
    
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
    --color-text-inverse: #0f172a;
  }
}