/* Color System for Old As Web */

:root {
  /* === LIGHT THEME === */
  
  /* Primary Colors */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-active: #004085;
  
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-dark: #1f2937;
  
  /* Text Colors */
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #4b5563;
  --color-text-light: #6b7280;
  --color-text-white: #ffffff;
  
  /* Border Colors */
  --color-border-light: #e9ecef;
  --color-border-medium: #d1d5db;
  --color-border-dark: #9ca3af;
  
  /* Accent Colors */
  --color-accent-blue: #007bff;
  --color-accent-red: #e11d48;
  --color-accent-yellow: #fbbf24;
  --color-accent-green: #10b981;
  
  /* Warning/Info Colors */
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeaa7;
  --color-warning-text: #856404;
  
  /* Interactive States */
  --color-link: #007bff;
  --color-link-hover: #0056b3;
  --color-link-active: #004085;
  
  /* Form Colors */
  --color-input-bg: #ffffff;
  --color-input-border: #d1d5db;
  --color-input-border-focus: #007bff;
  --color-input-text: #111827;
  --color-input-placeholder: #6b7280;
  
  /* Shadow Colors */
  --color-shadow-light: rgba(0, 0, 0, 0.1);
  --color-shadow-medium: rgba(0, 0, 0, 0.15);
  --color-shadow-dark: rgba(0, 0, 0, 0.25);
  
  /* Semantic Colors */
  --color-success: #10b981;
  --color-error: #e11d48;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
}

/* === DARK THEME === */
@media (prefers-color-scheme: dark) {
  :root {
    /* Primary Colors (same, they work well in dark) */
    --color-primary: #60a5fa;
    --color-primary-hover: #3b82f6;
    --color-primary-active: #2563eb;
    
    /* Background Colors */
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;
    --color-bg-dark: #020617;
    
    /* Text Colors */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-light: #64748b;
    --color-text-white: #ffffff;
    
    /* Border Colors */
    --color-border-light: #334155;
    --color-border-medium: #475569;
    --color-border-dark: #64748b;
    
    /* Accent Colors */
    --color-accent-blue: #60a5fa;
    --color-accent-red: #f87171;
    --color-accent-yellow: #fbbf24;
    --color-accent-green: #34d399;
    
    /* Warning/Info Colors */
    --color-warning-bg: #451a03;
    --color-warning-border: #92400e;
    --color-warning-text: #fbbf24;
    
    /* Interactive States */
    --color-link: #60a5fa;
    --color-link-hover: #3b82f6;
    --color-link-active: #2563eb;
    
    /* Form Colors */
    --color-input-bg: #1e293b;
    --color-input-border: #475569;
    --color-input-border-focus: #60a5fa;
    --color-input-text: #f8fafc;
    --color-input-placeholder: #94a3b8;
    
    /* Shadow Colors */
    --color-shadow-light: rgba(0, 0, 0, 0.3);
    --color-shadow-medium: rgba(0, 0, 0, 0.4);
    --color-shadow-dark: rgba(0, 0, 0, 0.5);
    
    /* Semantic Colors */
    --color-success: #34d399;
    --color-error: #f87171;
    --color-warning: #fbbf24;
    --color-info: #60a5fa;
  }
}

/* === MANUAL DARK THEME CLASS === */
.dark {
  /* Same as dark theme above, but triggered by class instead of media query */
  --color-primary: #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-primary-active: #2563eb;
  
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-bg-dark: #020617;
  
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-light: #64748b;
  --color-text-white: #ffffff;
  
  --color-border-light: #334155;
  --color-border-medium: #475569;
  --color-border-dark: #64748b;
  
  --color-accent-blue: #60a5fa;
  --color-accent-red: #f87171;
  --color-accent-yellow: #fbbf24;
  --color-accent-green: #34d399;
  
  --color-warning-bg: #451a03;
  --color-warning-border: #92400e;
  --color-warning-text: #fbbf24;
  
  --color-link: #60a5fa;
  --color-link-hover: #3b82f6;
  --color-link-active: #2563eb;
  
  --color-input-bg: #1e293b;
  --color-input-border: #475569;
  --color-input-border-focus: #60a5fa;
  --color-input-text: #f8fafc;
  --color-input-placeholder: #94a3b8;
  
  --color-shadow-light: rgba(0, 0, 0, 0.3);
  --color-shadow-medium: rgba(0, 0, 0, 0.4);
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  
  --color-success: #34d399;
  --color-error: #f87171;
  --color-warning: #fbbf24;
  --color-info: #60a5fa;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-light { color: var(--color-text-light); }
.text-white { color: var(--color-text-white); }

.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }

.border-light { border-color: var(--color-border-light); }
.border-medium { border-color: var(--color-border-medium); }
.border-dark { border-color: var(--color-border-dark); }

.link-primary { color: var(--color-link); }
.link-primary:hover { color: var(--color-link-hover); }
.link-primary:active { color: var(--color-link-active); }