/**
 * PersonalFreedom.ai Theme System
 * Centralized theme colors for easy brand management
 * 
 * To change themes, simply uncomment the desired theme below
 * or create your own custom theme
 */

/* ======================================
   ACTIVE THEME: Blue & Orange
   ====================================== */
:root {
  /* Primary Brand Colors */
  --brand-primary: #2563eb;        /* Blue 600 */
  --brand-primary-hover: #1d4ed8;  /* Blue 700 */
  --brand-primary-light: #dbeafe;  /* Blue 100 */
  --brand-primary-dark: #1e40af;   /* Blue 800 */
  
  /* Accent Colors */
  --brand-accent: #f97316;          /* Orange 500 */
  --brand-accent-hover: #ea580c;   /* Orange 600 */
  --brand-accent-light: #fed7aa;   /* Orange 200 */
  
  /* Gradient Colors */
  --brand-gradient-from: #2563eb;  /* Blue 600 */
  --brand-gradient-to: #1e40af;    /* Blue 800 */
  
  /* Text Colors */
  --brand-text-on-primary: #ffffff;
  --brand-text-on-light: #2563eb;
}

/* ======================================
   THEME: Emerald & Teal (Original)
   ====================================== */
/*
:root {
  --brand-primary: #10b981;
  --brand-primary-hover: #059669;
  --brand-primary-light: #d1fae5;
  --brand-primary-dark: #047857;
  
  --brand-accent: #14b8a6;
  --brand-accent-hover: #0d9488;
  --brand-accent-light: #99f6e4;
  
  --brand-gradient-from: #10b981;
  --brand-gradient-to: #14b8a6;
  
  --brand-text-on-primary: #ffffff;
  --brand-text-on-light: #10b981;
}
*/

/* ======================================
   THEME: Purple & Pink
   ====================================== */
/*
:root {
  --brand-primary: #9333ea;
  --brand-primary-hover: #7c3aed;
  --brand-primary-light: #ede9fe;
  --brand-primary-dark: #6b21a8;
  
  --brand-accent: #ec4899;
  --brand-accent-hover: #db2777;
  --brand-accent-light: #fce7f3;
  
  --brand-gradient-from: #9333ea;
  --brand-gradient-to: #6b21a8;
  
  --brand-text-on-primary: #ffffff;
  --brand-text-on-light: #9333ea;
}
*/

/* ======================================
   THEME: Dark Mode (Gray & Cyan)
   ====================================== */
/*
:root {
  --brand-primary: #374151;
  --brand-primary-hover: #1f2937;
  --brand-primary-light: #e5e7eb;
  --brand-primary-dark: #111827;
  
  --brand-accent: #06b6d4;
  --brand-accent-hover: #0891b2;
  --brand-accent-light: #cffafe;
  
  --brand-gradient-from: #374151;
  --brand-gradient-to: #111827;
  
  --brand-text-on-primary: #ffffff;
  --brand-text-on-light: #374151;
}
*/

/* ======================================
   UTILITY CLASSES
   Map CSS variables to Tailwind-style classes
   ====================================== */

/* Background Colors */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-primary-hover { background-color: var(--brand-primary-hover) !important; }
.bg-brand-primary-light { background-color: var(--brand-primary-light) !important; }
.bg-brand-primary-dark { background-color: var(--brand-primary-dark) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-accent-hover { background-color: var(--brand-accent-hover) !important; }
.bg-brand-accent-light { background-color: var(--brand-accent-light) !important; }

/* Text Colors */
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-primary-hover { color: var(--brand-primary-hover) !important; }
.text-brand-primary-light { color: var(--brand-primary-light) !important; }
.text-brand-primary-dark { color: var(--brand-primary-dark) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-brand-accent-hover { color: var(--brand-accent-hover) !important; }
.text-brand-on-primary { color: var(--brand-text-on-primary) !important; }
.text-brand-on-light { color: var(--brand-text-on-light) !important; }

/* Border Colors */
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-primary-hover { border-color: var(--brand-primary-hover) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }

/* Ring Colors (for focus states) */
.ring-brand-primary { --tw-ring-color: var(--brand-primary) !important; }
.ring-brand-accent { --tw-ring-color: var(--brand-accent) !important; }

/* Hover States */
.hover\:bg-brand-primary-hover:hover { background-color: var(--brand-primary-hover) !important; }
.hover\:bg-brand-accent-hover:hover { background-color: var(--brand-accent-hover) !important; }
.hover\:text-brand-primary:hover { color: var(--brand-primary) !important; }
.hover\:text-brand-primary-hover:hover { color: var(--brand-primary-hover) !important; }
.hover\:text-brand-accent:hover { color: var(--brand-accent) !important; }

/* Focus States */
.focus\:ring-brand-primary:focus { --tw-ring-color: var(--brand-primary) !important; }
.focus\:border-brand-primary:focus { border-color: var(--brand-primary) !important; }

/* Gradient Backgrounds */
.bg-gradient-brand {
  background: linear-gradient(to bottom right, var(--brand-gradient-from), var(--brand-gradient-to)) !important;
}

/* Custom Component Classes */
.btn-brand-primary {
  background-color: var(--brand-primary);
  color: var(--brand-text-on-primary);
  transition: background-color 0.2s;
}

.btn-brand-primary:hover {
  background-color: var(--brand-primary-hover);
}

.btn-brand-accent {
  background-color: var(--brand-accent);
  color: var(--brand-text-on-primary);
  transition: background-color 0.2s;
}

.btn-brand-accent:hover {
  background-color: var(--brand-accent-hover);
}

.link-brand {
  color: var(--brand-primary);
  transition: color 0.2s;
}

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

/* Icon Brand Colors */
.icon-brand-primary { color: var(--brand-primary); }
.icon-brand-accent { color: var(--brand-accent); }

/* Form Input Focus States */
.input-brand:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Badge/Tag Styles */
.badge-brand {
  background-color: var(--brand-primary-light);
  color: var(--brand-primary-dark);
}

.badge-accent {
  background-color: var(--brand-accent-light);
  color: var(--brand-accent);
}