/* ================================
 * Satya Theme System
 * ================================
 * Central theme management with CSS custom properties
 * Supports color themes + light/dark modes
 */

:root {
  /* Color Theme Variables - Default Green */
  --primary-50: #f0fdf4;
  --primary-100: #dcfce7;
  --primary-200: #bbf7d0;
  --primary-300: #86efac;
  --primary-400: #4ade80;
  --primary-500: #22c55e;
  --primary-600: #16a34a;
  --primary-700: #15803d;
  --primary-800: #166534;
  --primary-900: #14532d;
  --primary-950: #052e16;
  
  /* State Colors - Success */
  --success: #059669;
  --success-light: #10B981;
  --success-subtle: #D1FAE5;
  --success-dark: #064E3B;
  
  /* State Colors - Error */
  --error: #DC2626;
  --error-light: #EF4444;
  --error-subtle: #FEE2E2;
  --error-dark: #7F1D1D;
  
  /* State Colors - Warning */
  --warning: #D97706;
  --warning-light: #F59E0B;
  --warning-subtle: #FEF3C7;
  --warning-dark: #92400E;
  
  /* State Colors - Info */
  --info: #2563EB;
  --info-light: #3B82F6;
  --info-subtle: #DBEAFE;
  --info-dark: #1E3A8A;
  
  /* Light Mode Base Colors - Neutral backgrounds with good contrast */
  --bg-primary: #ffffff;     /* Light backgrounds (navbar, cards, sections) */
  --bg-secondary: #f9fafb;   /* Subtle section backgrounds */
  --bg-tertiary: #f3f4f6;    /* Even more subtle backgrounds */
  --text-primary: #111827;   /* Dark text on light backgrounds */
  --text-secondary: #374151; /* Secondary dark text */
  --text-tertiary: #6b7280;  /* Muted dark text */
  --text-quaternary: #9ca3af;/* Very muted text */
  --border-primary: #e5e7eb; /* Light borders */
  --border-secondary: #d1d5db;
  
  /* Brand Colors - Use these for buttons, links, accents */
  --brand-primary: var(--primary);   /* Main brand color - use theme's primary */
  --brand-primary-hover: var(--primary-hover);
  --brand-primary-light: var(--primary-100);
  --brand-primary-subtle: var(--primary-50);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark Mode Overrides - Neutral backgrounds with good contrast */
[data-theme="dark"] {
  --bg-primary: #1f2937;     /* Dark backgrounds (navbar, cards, sections) */
  --bg-secondary: #111827;   /* Darker section backgrounds */
  --bg-tertiary: #374151;    /* Lighter dark backgrounds */
  --text-primary: #f9fafb;   /* Light text on dark backgrounds */
  --text-secondary: #e5e7eb; /* Secondary light text */
  --text-tertiary: #d1d5db;  /* Muted light text */
  --text-quaternary: #9ca3af;/* Very muted text */
  --border-primary: #374151; /* Dark borders */
  --border-secondary: #4b5563;
  
  /* Brand colors remain theme-aware in dark mode */
  --brand-primary: var(--primary);   /* Use theme's primary for dark mode too */
  --brand-primary-hover: var(--primary-hover);
  --brand-primary-light: var(--primary-900);
  --brand-primary-subtle: var(--primary-950);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Color Theme Variations */
[data-color-theme="blue"] {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --primary-950: #172554;
}

[data-color-theme="purple"] {
  --primary-50: #faf5ff;
  --primary-100: #f3e8ff;
  --primary-200: #e9d5ff;
  --primary-300: #d8b4fe;
  --primary-400: #c084fc;
  --primary-500: #a855f7;
  --primary-600: #9333ea;
  --primary-700: #7c3aed;
  --primary-800: #6b21a8;
  --primary-900: #581c87;
  --primary-950: #3b0764;
}

[data-color-theme="orange"] {
  --primary-50: #fff7ed;
  --primary-100: #ffedd5;
  --primary-200: #fed7aa;
  --primary-300: #fdba74;
  --primary-400: #fb923c;
  --primary-500: #f97316;
  --primary-600: #ea580c;
  --primary-700: #c2410c;
  --primary-800: #9a3412;
  --primary-900: #7c2d12;
  --primary-950: #431407;
}

[data-color-theme="teal"] {
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;
  --primary-950: #042f2e;
}

[data-color-theme="rose"] {
  --primary-50: #fff1f2;
  --primary-100: #ffe4e6;
  --primary-200: #fecdd3;
  --primary-300: #fda4af;
  --primary-400: #fb7185;
  --primary-500: #f43f5e;
  --primary-600: #e11d48;
  --primary-700: #be123c;
  --primary-800: #9f1239;
  --primary-900: #881337;
  --primary-950: #4c0519;
}

/* Base Element Styling with CSS Variables */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navigation Styling */
nav {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-sm);
}

/* Cards and Surfaces */
.card, .bg-white {
  background-color: var(--bg-primary);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-md);
}

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

/* Text Styling */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* Primary Color Elements */
.btn-primary, .bg-green-600, .bg-green-500 {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.btn-primary:hover, .bg-green-600:hover, .bg-green-700 {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.text-green-600, .text-green-500 {
  color: var(--primary-600);
}

.text-green-700 {
  color: var(--primary-700);
}

.border-green-500 {
  border-color: var(--primary-500);
}

.ring-green-500 {
  --tw-ring-color: var(--primary-500);
}

.focus\:ring-green-500:focus {
  --tw-ring-color: var(--primary-500);
}

.focus\:border-green-500:focus {
  border-color: var(--primary-500);
}

/* Background Variations */
.bg-green-50 {
  background-color: var(--primary-50);
}

.bg-green-100 {
  background-color: var(--primary-100);
}

/* Forms */
input, textarea, select {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--primary-500);
  --tw-ring-color: var(--primary-500);
}

/* Buttons */
.btn-secondary {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
}

/* Utility Classes for Theme System */
.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* System Theme Detection */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --text-quaternary: #9ca3af;
    --border-primary: #374151;
    --border-secondary: #4b5563;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  }
}

/* Hero Gradient - Theme Aware */
.hero-gradient {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
}

/* Semantic Theme Classes - Use these instead of Tailwind gray classes */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }

.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }

.shadow-theme-sm { box-shadow: var(--shadow-sm); }
.shadow-theme-md { box-shadow: var(--shadow-md); }
.shadow-theme-lg { box-shadow: var(--shadow-lg); }

/* State Color Classes */
.bg-success { background-color: var(--success); }
.bg-success-light { background-color: var(--success-light); }
.bg-success-subtle { background-color: var(--success-subtle); }
.text-success { color: var(--success); }
.text-success-dark { color: var(--success-dark); }
.border-success { border-color: var(--success); }
.border-success-light { border-color: var(--success-light); }

.bg-error { background-color: var(--error); }
.bg-error-light { background-color: var(--error-light); }
.bg-error-subtle { background-color: var(--error-subtle); }
.text-error { color: var(--error); }
.text-error-dark { color: var(--error-dark); }
.border-error { border-color: var(--error); }
.border-error-light { border-color: var(--error-light); }

.bg-warning { background-color: var(--warning); }
.bg-warning-light { background-color: var(--warning-light); }
.bg-warning-subtle { background-color: var(--warning-subtle); }
.text-warning { color: var(--warning); }
.text-warning-dark { color: var(--warning-dark); }
.border-warning { border-color: var(--warning); }
.border-warning-light { border-color: var(--warning-light); }

.bg-info { background-color: var(--info); }
.bg-info-light { background-color: var(--info-light); }
.bg-info-subtle { background-color: var(--info-subtle); }
.text-info { color: var(--info); }
.text-info-dark { color: var(--info-dark); }
.border-info { border-color: var(--info); }
.border-info-light { border-color: var(--info-light); }

/* Primary state variations */
.hover\:text-success-dark:hover { color: var(--success-dark); }
.hover\:text-error-dark:hover { color: var(--error-dark); }
.hover\:text-warning-dark:hover { color: var(--warning-dark); }
.hover\:text-info-dark:hover { color: var(--info-dark); }

/* Brand color utilities - for buttons, links, accents */
.bg-brand-primary { background-color: var(--brand-primary); }
.text-brand-primary { color: var(--brand-primary); }
.border-brand-primary { border-color: var(--brand-primary); }
.hover\:bg-brand-primary-hover:hover { background-color: var(--brand-primary-hover); }
.hover\:text-brand-primary:hover { color: var(--brand-primary); }
.focus\:ring-brand-primary:focus { --tw-ring-color: var(--brand-primary); }
.focus\:border-brand-primary:focus { border-color: var(--brand-primary); }

/* Brand color opacity variants */
.bg-brand-primary\/10 { background-color: rgb(from var(--brand-primary) r g b / 0.1); }
.bg-brand-primary\/20 { background-color: rgb(from var(--brand-primary) r g b / 0.2); }
.text-brand-primary\/80 { color: rgb(from var(--brand-primary) r g b / 0.8); }
.focus\:border-brand-primary:focus { border-color: var(--brand-primary); }

/* Keep existing for backward compatibility but map correctly */
.bg-primary { background-color: var(--bg-primary); }
.text-primary { color: var(--text-primary); }
.border-primary { border-color: var(--border-primary); }

/* Responsive Theme Adjustments */
@media (max-width: 768px) {
  nav {
    border-bottom: 1px solid var(--border-primary);
  }
}