/* ============================================
   THEME COLOR VARIABLES
   Light and Dark Mode Color Definitions
   ============================================ */

/* ============================================
   DARK MODE (DEFAULT)
   ============================================ */
:root {
  /* Primary Colors */
  --color-primary: #6366f1;
  --color-secondary: #818cf8;
  --color-accent: #a78bfa;
  
  /* Background Colors */
  --color-dark-bg: #0f172a;
  --color-card-bg: #1e293b;
  --color-hover: #334155;
  
  /* Text Colors */
  --color-light-text: #f1f5f9;
  --color-dark-text: #1e293b;
  
  /* Border Color */
  --color-border: #475569;
  
  /* Status Colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* ========== TEMPLATE VARIABLES (Dark Mode) ========== */
  --white: #f1f5f9;
  --black: #0f172a;
  --dark: #1e293b;
  --dark-secondary: #334155;
  --bg-gray: #1e293b;
  --bg-gray-secondary: #0f172a;
  --color-heading: #f1f5f9;
  --color-paragraph: #cbd5e1;
  --color-optional: #6366f1;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

/* ============================================
   LIGHT MODE
   Applied when data-scheme="light"
   ============================================ */
[data-scheme="light"] {
  /* Primary Colors */
  --color-primary: #4f46e5;
  --color-secondary: #6366f1;
  --color-accent: #818cf8;
  
  /* Background Colors */
  --color-dark-bg: #ffffff;
  --color-card-bg: #f8fafc;
  --color-hover: #e2e8f0;
  
  /* Text Colors */
  --color-light-text: #1e293b;
  --color-dark-text: #0f172a;
  
  /* Border Color */
  --color-border: #cbd5e1;
  
  /* Status Colors */
  --color-success: #059669;
  --color-warning: #d97706;
  --color-error: #dc2626;
  --color-info: #2563eb;
  
  /* ========== TEMPLATE VARIABLES (Light Mode) ========== */
  --white: #ffffff;
  --black: #000000;
  --dark: #1e293b;
  --dark-secondary: #64748b;
  --bg-gray: #f8fafc;
  --bg-gray-secondary: #f1f5f9;
  --color-heading: #0f172a;
  --color-paragraph: #475569;
  --color-optional: #4f46e5;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
}

/* ============================================
   THEME SPECIFIC COLORS
   Applied when data-theme="theme-id"
   Dark mode when no data-scheme, Light mode when data-scheme="light"
   ============================================ */

/* Tech Modern Theme - Dark Mode */
html[data-theme="tech-modern"] {
  --color-primary: #0f766e !important;
  --color-secondary: #7b4aed !important;
  --color-accent: #fdb022 !important;
  --color-optional: #0f766e !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Tech Modern Theme - Light Mode */
html[data-scheme="light"][data-theme="tech-modern"] {
  --color-primary: #115e59 !important;
  --color-secondary: #6d28d9 !important;
  --color-accent: #d97706 !important;
  --color-optional: #115e59 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Green Growth Theme - Dark Mode */
html[data-theme="green-growth"] {
  --color-primary: #10b981 !important;
  --color-secondary: #3b82f6 !important;
  --color-accent: #f59e0b !important;
  --color-optional: #10b981 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Green Growth Theme - Light Mode */
html[data-scheme="light"][data-theme="green-growth"] {
  --color-primary: #059669 !important;
  --color-secondary: #2563eb !important;
  --color-accent: #d97706 !important;
  --color-optional: #059669 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Sunset Pakistan Theme - Dark Mode */
html[data-theme="sunset-pakistan"] {
  --color-primary: #dc2626 !important;
  --color-secondary: #1e40af !important;
  --color-accent: #fbbf24 !important;
  --color-optional: #dc2626 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Sunset Pakistan Theme - Light Mode */
html[data-scheme="light"][data-theme="sunset-pakistan"] {
  --color-primary: #b91c1c !important;
  --color-secondary: #1e3a8a !important;
  --color-accent: #d97706 !important;
  --color-optional: #b91c1c !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Minimalist Theme - Dark Mode */
html[data-theme="minimalist"] {
  --color-primary: #000000 !important;
  --color-secondary: #ffffff !important;
  --color-accent: #ec4899 !important;
  --color-optional: #000000 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Minimalist Theme - Light Mode */
html[data-scheme="light"][data-theme="minimalist"] {
  --color-primary: #000000 !important;
  --color-secondary: #1f2937 !important;
  --color-accent: #ec4899 !important;
  --color-optional: #000000 !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Cyberpunk Theme - Dark Mode */
html[data-theme="cyberpunk"] {
  --color-primary: #00d9ff !important;
  --color-secondary: #ff006e !important;
  --color-accent: #ffbe0b !important;
  --color-optional: #00d9ff !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* Cyberpunk Theme - Light Mode */
html[data-scheme="light"][data-theme="cyberpunk"] {
  --color-primary: #00b8cc !important;
  --color-secondary: #c2185b !important;
  --color-accent: #f59e0b !important;
  --color-optional: #00b8cc !important;
  --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
  --bg-gradient-reverse: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%) !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
body,
body * {
  transition: background-color 300ms ease-in-out,
              color 300ms ease-in-out,
              border-color 300ms ease-in-out,
              box-shadow 300ms ease-in-out !important;
}

/* Preserve animation transitions */
@media (prefers-reduced-motion: reduce) {
  body,
  body * {
    transition: none !important;
  }
}