/**
 * Centralized Color System
 * Complete color definitions for light and dark modes
 * All colors should be referenced from here
 */

/* Base color definitions - Brand colors that don't change */
:root {
  /* Brand Identity */
  --brand-primary: #0D0D0D;              /* Near black */
  --brand-name: "SalesXMachina";
  
  /* Fixed Colors (don't change with theme) */
  --color-white: #FFFFFF;                /* Pure white */
  --color-black: #000000;                /* Pure black */
  --color-transparent: transparent;      /* Transparent */
}

/* LIGHT MODE - Default Theme */
html[data-theme="light"],
html:root {
  /* === PRIMARY COLORS === */
  --color-bg-primary: #FFFFFF;           /* Main background - pure white */
  --color-bg-secondary: #F8F8F8;         /* Cards, sections, elevated surfaces - off white */
  --color-bg-tertiary: #F5F5F5;          /* Input fields, subtle backgrounds - light gray */
  --color-bg-hover: #DDDDDD;             /* Hover states - medium light gray */
  --color-bg-active: #CCCCCC;            /* Active/pressed states - light gray */
  --color-bg-disabled: #F5F5F5;          /* Disabled elements - light gray */
  
  /* === TEXT COLORS === */
  --color-text-primary: #000000;         /* Main text, headlines - pure black */
  --color-text-secondary: #444444;       /* Secondary text, captions - charcoal */
  --color-text-tertiary: #777777;        /* Placeholders, hints - medium gray */
  --color-text-disabled: #CCCCCC;        /* Disabled text - light gray */
  --color-text-inverse: #FFFFFF;         /* Text on dark backgrounds - pure white */
  
  /* === BORDER COLORS === */
  --color-border-primary: #DDDDDD;       /* Main borders - medium light gray */
  --color-border-secondary: #CCCCCC;     /* Subtle borders - light gray */
  --color-border-focus: #666666;         /* Focus borders - dark gray */
  --color-border-error: #DC3545;         /* Error borders - red */
  
  /* === INTERACTIVE COLORS === */
  --color-link: #333333;                 /* Links - dark gray */
  --color-link-hover: #000000;           /* Link hover - black */
  --color-link-visited: #666666;         /* Visited links - medium gray */
  --color-link-active: #555555;          /* Active/selected links - slate gray */
  
  /* === STATUS COLORS === */
  /* Success */
  --color-success: #19d17c;              /* Success - green */
  --color-success-bg: #D1E7DD;           /* Success background - pale green */
  --color-success-text: #0F5132;         /* Success text - dark green */
  --color-success-border: #BADBCC;       /* Success border - light green */
  
  /* Warning */
  --color-warning: #FFC107;              /* Warning - amber/yellow */
  --color-warning-bg: #FFF3CD;           /* Warning background - pale yellow */
  --color-warning-text: #664D03;         /* Warning text - dark brown */
  --color-warning-border: #FFECB5;       /* Warning border - light yellow */
  
  /* Error/Danger */
  --color-error: #DC3545;                /* Error - red */
  --color-error-bg: #F8D7DA;             /* Error background - pale red */
  --color-error-text: #721C24;           /* Error text - dark red */
  --color-error-border: #F5C2C7;         /* Error border - light red */
  
  /* Info */
  --color-info: #6B7280;                 /* Info - medium gray */
  --color-info-bg: #F3F4F6;              /* Info background - light gray */
  --color-info-text: #374151;            /* Info text - dark gray */
  --color-info-border: #D1D5DB;          /* Info border - light gray */
  
  /* === COMPONENT SPECIFIC === */
  --color-modal-backdrop: rgba(0, 0, 0, 0.5);     /* Modal backdrop - 50% black */
  --color-tooltip-bg: #000000;                    /* Tooltip background - black */
  --color-tooltip-text: #FFFFFF;                  /* Tooltip text - white */
  --color-shadow: rgba(0, 0, 0, 0.15);            /* Shadow - 15% black */
  
  /* === FORM ELEMENTS === */
  --color-input-bg: #FFFFFF;                /* Input backgrounds - pure white */
  --color-input-border: #DDDDDD;            /* Input borders - medium light gray */
  --color-input-focus: #666666;             /* Input focus - dark gray */
  --color-input-placeholder: #777777;       /* Placeholder text - medium gray */
  
  /* === BUTTON VARIANTS === */
  --color-btn-primary-bg: #FFFFFF;                  /* Primary button - pure white */
  --color-btn-primary-text: #0D0D0D;                /* Primary button text - brand primary (near black) */
  --color-btn-primary-border: #0D0D0D;              /* Primary button border - brand primary (near black) */
  --color-btn-primary-hover-bg: #F8F8F8;            /* Primary button hover - off white */
  
  --color-btn-secondary-bg: #FFFFFF;                /* Secondary button - pure white */
  --color-btn-secondary-text: #666666;              /* Secondary button text - dark gray */
  --color-btn-secondary-border: #CCCCCC;            /* Secondary button border - light gray */
  --color-btn-secondary-hover-bg: #F5F5F5;          /* Secondary button hover - light gray */
  
  /* === LOGO COLORS === */
  --color-logo-highlight-bg: #FFFFFF;               /* Logo highlight background - pure white */
  --color-logo-highlight-text: #FFFFFF;             /* Logo highlight text - pure white */
  --color-logo-text: var(--brand-primary);          /* Logo main text - near black */
}

/* DARK MODE - Theme Override */
html[data-theme="dark"] {
  /* === PRIMARY COLORS === */
  --color-bg-primary: #1A1A1A;           /* Main background - deep black */
  --color-bg-secondary: #303030;         /* Cards, sections, elevated surfaces - dark charcoal */
  --color-bg-tertiary: #333333;          /* Input fields, subtle backgrounds - medium dark gray */
  --color-bg-hover: #444444;             /* Hover states - medium dark gray */
  --color-bg-active: #555555;            /* Active/pressed states - darker gray */
  --color-bg-disabled: #222222;          /* Disabled elements - dark charcoal */
  
  /* === TEXT COLORS === */
  --color-text-primary: #FFFFFF;         /* Main text, headlines - white */
  --color-text-secondary: #CCCCCC;       /* Secondary text, captions - light gray */
  --color-text-tertiary: #999999;        /* Placeholders, hints - medium gray */
  --color-text-disabled: #666666;        /* Disabled text - dark gray */
  --color-text-inverse: #FFFFFF;         /* Text on dark backgrounds - white */
  
  /* === BORDER COLORS === */
  --color-border-primary: #555555;       /* Main borders - dark gray */
  --color-border-secondary: #666666;     /* Subtle borders - medium gray */
  --color-border-focus: #666666;         /* Focus borders - medium gray */
  --color-border-error: #F87171;         /* Error borders */
  
  /* === INTERACTIVE COLORS === */
  --color-link: #FFFFFF;                 /* Links - blue */
  --color-link-hover: #FFFFFF;           /* Link hover - lighter blue */
  --color-link-visited: #9966CC;         /* Visited links - light purple/lavender */
  --color-link-active: #93C5FD;          /* Active/selected links - light blue */
  
  /* === STATUS COLORS === */
  /* Success */
  --color-success: #22C55E;
  --color-success-bg: #064E3B;
  --color-success-text: #A7F3D0;
  --color-success-border: #065F46;
  
  /* Warning */
  --color-warning: #F59E0B;
  --color-warning-bg: #78350F;
  --color-warning-text: #FCD34D;
  --color-warning-border: #92400E;
  
  /* Error/Danger */
  --color-error: #EF4444;
  --color-error-bg: #7F1D1D;
  --color-error-text: #FCA5A5;
  --color-error-border: #991B1B;
  
  /* Info */
  --color-info: #3B82F6;                 /* Info - medium blue */
  --color-info-bg: #1E3A8A;              /* Info background - dark blue */
  --color-info-text: #93C5FD;            /* Info text - light blue */
  --color-info-border: #1D4ED8;          /* Info border - blue */
  
  /* === COMPONENT SPECIFIC === */
  --color-modal-backdrop: rgba(0, 0, 0, 0.8);
  --color-tooltip-bg: #333333;
  --color-tooltip-text: #FFFFFF;
  --color-shadow: rgba(0, 0, 0, 0.5);
  
  /* === FORM ELEMENTS === */
  --color-input-bg: #1A1A1A;                   /* Input backgrounds - dark charcoal */
  --color-input-border: #555555;               /* Input borders - dark gray */
  --color-input-focus: #666666;                /* Input focus - medium gray */
  --color-input-placeholder: #999999;          /* Placeholder text - medium gray */
  
  /* === BUTTON VARIANTS === */
  --color-btn-primary-bg: #333333;             /* Primary button - dark gray */
  --color-btn-primary-text: #FFFFFF;           /* Primary button text - white */
  --color-btn-primary-border: #FFFFFF;         /* Primary button border - white for visibility */
  --color-btn-primary-hover-bg: #444444;       /* Primary button hover - medium gray */
  
  --color-btn-secondary-bg: #333333;           /* Secondary button - medium dark gray */
  --color-btn-secondary-text: #FFFFFF;         /* Secondary button text - white */
  --color-btn-secondary-border: #555555;       /* Secondary button border - dark gray */
  --color-btn-secondary-hover-bg: #444444;     /* Secondary button hover - medium dark gray */
  
  /* === LOGO COLORS === */
  --color-logo-highlight-bg: #1A1A1A;               /* Logo highlight background - very dark gray */
  --color-logo-highlight-text: #FFFFFF;             /* Logo highlight text - pure white */
  --color-logo-text: var(--color-text-primary);     /* Logo main text - pure white */
}

/* Media Query Support Removed - Explicit theme control only */
/* This prevents theme flashes by eliminating competing CSS selectors */

/* Legacy Support - Maps old variable names to new centralized system */
:root {
  /* Legacy mappings for backward compatibility */
  --color-bg-elevated: var(--color-bg-secondary);
  --color-bg-subtle: var(--color-bg-tertiary);
  --color-border: var(--color-border-primary);
  --color-border-subtle: var(--color-border-secondary);
  --color-text-placeholder: var(--color-text-tertiary);
  --color-focus: var(--color-border-focus);
  --color-focus-ring: var(--color-input-focus);
}

/* Typography with Color System - High Specificity */
html[data-theme="light"] h1, 
html[data-theme="light"] h2, 
html[data-theme="light"] h3, 
html[data-theme="light"] h4, 
html[data-theme="light"] h5, 
html[data-theme="light"] h6,
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
  color: var(--color-text-primary) !important;
}

html[data-theme="light"] p, 
html[data-theme="light"] span, 
html[data-theme="light"] div,
html[data-theme="dark"] p, 
html[data-theme="dark"] span, 
html[data-theme="dark"] div {
  color: var(--color-text-primary);
}

html[data-theme="light"] a,
html[data-theme="dark"] a {
  color: var(--color-link);
}

html[data-theme="light"] a:hover,
html[data-theme="dark"] a:hover {
  color: var(--color-link-hover);
}

/* Body Background Override */
html[data-theme="light"] body,
html[data-theme="dark"] body {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
}

/* Funnel Stage Dark Mode Override */
html[data-theme="dark"] .funnel-stage {
  background-color: #2a2a2a !important;          /* Funnel stage - dark gray */
}

/* === ADDITIONAL SEMANTIC COLORS === */
/* Bootstrap-like color system for status indicators */
:root {
  /* Gray Scale */
  --color-gray-50: #f9fafb;               /* Very light gray */
  --color-gray-100: #f3f4f6;              /* Light gray */
  --color-gray-200: #e5e7eb;              /* Medium light gray */
  --color-gray-300: #d1d5db;              /* Light gray */
  --color-gray-400: #9ca3af;              /* Medium gray */
  --color-gray-500: #6b7280;              /* Medium gray */
  --color-gray-600: #4b5563;              /* Dark gray */
  --color-gray-700: #374151;              /* Darker gray */
  --color-gray-800: #1f2937;              /* Very dark gray */
  --color-gray-900: #111827;              /* Near black */
  
  /* Status Colors - Primary */
  --color-primary-50: #f9fafb;            /* Very light gray */
  --color-primary-100: #f3f4f6;           /* Light gray */
  --color-primary-500: #6b7280;           /* Medium gray */
  --color-primary-600: #4b5563;           /* Dark gray */
  --color-primary-700: #374151;           /* Darker gray */
  
  /* AI Score Colors */
  --color-score-high: #22c55e;            /* High score - bright green */
  --color-score-high-border: #16a34a;     /* High score border - dark green */
  --color-score-medium: #eab308;          /* Medium score - yellow */
  --color-score-medium-border: #ca8a04;   /* Medium score border - dark yellow */
  --color-score-low: #ef4444;             /* Low score - red */
  --color-score-low-border: #dc2626;      /* Low score border - dark red */
  
  /* Feedback Colors */
  --color-feedback-like: #22c55e;
  --color-feedback-like-hover: #16a34a;
  --color-feedback-dislike: #ef4444;
  --color-feedback-dislike-hover: #dc2626;
  
  /* Lead Status Colors */
  --color-status-new: #6b7280;
  --color-status-new-bg: #f3f4f6;
  --color-status-contacted: #3b82f6;
  --color-status-contacted-bg: #dbeafe;
  --color-status-responded: #22c55e;
  --color-status-responded-bg: #dcfce7;
  --color-status-qualified: #22c55e;
  --color-status-qualified-bg: #dcfce7;
  --color-status-disqualified: #ef4444;
  --color-status-disqualified-bg: #fef2f2;
  
  /* Timeline Colors */
  --color-timeline-default: #6b7280;      /* Timeline default - medium gray */
  --color-timeline-manual: #4b5563;       /* Timeline manual - dark gray */
  --color-timeline-extension: #22c55e;    /* Timeline extension - green */
  --color-timeline-api: #6b7280;          /* Timeline API - medium gray */
  --color-timeline-validation: #eab308;   /* Timeline validation - yellow */
  
  /* Funnel Stage Colors - Light Theme (Light Greyish) */
  --color-funnel-stage-1: #9ca3af;
  --color-funnel-stage-1-dark: #6b7280;
  --color-funnel-stage-2: #9ca3af;
  --color-funnel-stage-2-dark: #6b7280;
  --color-funnel-stage-3: #9ca3af;
  --color-funnel-stage-3-dark: #6b7280;
  --color-funnel-stage-4: #9ca3af;
  --color-funnel-stage-4-dark: #6b7280;
  
  /* Tone Badge Colors - Light Theme (Lighter Greys) */
  --color-tone-formal: #d1d5db;           /* Tone formal - very light gray */
  --color-tone-professional: #e5e7eb;     /* Tone professional - lighter gray */
  --color-tone-friendly: #f3f4f6;         /* Tone friendly - very light gray */
  
  /* Strategy Badge Colors - Light Theme (Lighter Greys) */
  --color-strategy-problem-aware: #d1d5db;    /* Strategy problem aware - very light gray */
  --color-strategy-problem-unaware: #e5e7eb;  /* Strategy problem unaware - lighter gray */
  --color-strategy-solution: #f3f4f6;         /* Strategy solution - very light gray */
  --color-strategy-success: #f9fafb;          /* Strategy success - extremely light gray */
  
  /* CTA Badge Colors - Light Theme (Lighter Greys) */
  --color-cta-question: #d1d5db;          /* CTA question - very light gray */
  --color-cta-calendar: #e5e7eb;          /* CTA calendar - lighter gray */
  --color-cta-value: #f3f4f6;             /* CTA value - very light gray */
  --color-cta-custom: #f9fafb;            /* CTA custom - extremely light gray */
  
  /* Commitment Badge Colors - Light Theme (Lighter Greys) */
  --color-commitment-low: #e5e7eb;         /* Commitment low - lighter gray */
  --color-commitment-medium: #f3f4f6;      /* Commitment medium - very light gray */
  --color-commitment-flexible: #d1d5db;    /* Commitment flexible - very light gray */
  
  /* AI Recommendation Colors - Fancy Innovation Blue */
  --color-ai-primary: #0066FF;                    /* AI primary - electric blue */
  --color-ai-secondary: #1E90FF;                  /* AI secondary - dodger blue */
  --color-ai-accent: #00D4FF;                     /* AI accent - cyan blue */
  --color-ai-deep: #003D99;                       /* AI deep - navy blue */
  --color-recommendation-overlay: rgba(255, 255, 255, 0.15);  /* Recommendation overlay - 15% white */
  --color-recommendation-border: rgba(255, 255, 255, 0.25);   /* Recommendation border - 25% white */
  --color-recommendation-hover: rgba(255, 255, 255, 0.25);    /* Recommendation hover - 25% white */

  /* Gradient Definitions */
  --gradient-funnel: linear-gradient(135deg, #f8fafb 0%, #e5e7eb 100%);
  --gradient-funnel-stage: linear-gradient(135deg, var(--brand-primary) 0%, #374151 100%);
  --gradient-ai-recommendations: linear-gradient(135deg, var(--color-ai-primary) 0%, var(--color-ai-secondary) 30%, var(--color-ai-accent) 100%);
  
  /* Overlay Colors */
  --overlay-black-5: rgba(0, 0, 0, 0.05);
  --overlay-black-10: rgba(0, 0, 0, 0.1);
  --overlay-black-15: rgba(0, 0, 0, 0.15);
  --overlay-black-20: rgba(0, 0, 0, 0.2);
  --overlay-white-5: rgba(255, 255, 255, 0.05);
  --overlay-white-10: rgba(255, 255, 255, 0.1);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-30: rgba(255, 255, 255, 0.3);
}

/* Dark Mode Overrides for Additional Colors */
html[data-theme="dark"] {
  /* AI Score Colors - Dark Mode */
  --color-score-high: #22c55e;
  --color-score-high-border: #16a34a;
  --color-score-medium: #eab308;
  --color-score-medium-border: #ca8a04;
  --color-score-low: #ef4444;
  --color-score-low-border: #dc2626;
  
  /* Lead Status Colors - Dark Mode */
  --color-status-new-bg: var(--color-bg-tertiary);
  --color-status-contacted-bg: var(--color-info-bg);
  --color-status-responded-bg: var(--color-success-bg);
  --color-status-qualified-bg: var(--color-success-bg);
  --color-status-disqualified-bg: var(--color-error-bg);
  
  /* Funnel Stage Colors - Dark Theme (Greyish) */
  --color-funnel-stage-1: #9ca3af;
  --color-funnel-stage-1-dark: #6b7280;
  --color-funnel-stage-2: #9ca3af;
  --color-funnel-stage-2-dark: #6b7280;
  --color-funnel-stage-3: #9ca3af;
  --color-funnel-stage-3-dark: #6b7280;
  --color-funnel-stage-4: #9ca3af;
  --color-funnel-stage-4-dark: #6b7280;
  
  /* Gradients - Dark Mode */
  --gradient-funnel: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
  --gradient-funnel-stage: linear-gradient(135deg, var(--color-btn-secondary-bg) 0%, var(--color-bg-hover) 100%);
}

/* Utility Classes for Quick Color Application */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-success { color: var(--color-success-text) !important; }
.text-warning { color: var(--color-warning-text) !important; }
.text-error { color: var(--color-error-text) !important; }
.text-info { color: var(--color-info-text) !important; }

.bg-primary { background-color: var(--color-bg-primary) !important; }
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
.bg-tertiary { background-color: var(--color-bg-tertiary) !important; }
.bg-success { background-color: var(--color-success-bg) !important; }
.bg-warning { background-color: var(--color-warning-bg) !important; }
.bg-error { background-color: var(--color-error-bg) !important; }
.bg-info { background-color: var(--color-info-bg) !important; }

.border-primary { border-color: var(--color-border-primary) !important; }
.border-secondary { border-color: var(--color-border-secondary) !important; }
.border-focus { border-color: var(--color-border-focus) !important; }
.border-error { border-color: var(--color-border-error) !important; }

/* Extended Utility Classes for New Colors */

/* Status Colors */
.text-status-new { color: var(--color-status-new) !important; }
.text-status-contacted { color: var(--color-status-contacted) !important; }
.text-status-responded { color: var(--color-status-responded) !important; }
.text-status-qualified { color: var(--color-status-qualified) !important; }
.text-status-disqualified { color: var(--color-status-disqualified) !important; }

.bg-status-new { background-color: var(--color-status-new-bg) !important; }
.bg-status-contacted { background-color: var(--color-status-contacted-bg) !important; }
.bg-status-responded { background-color: var(--color-status-responded-bg) !important; }
.bg-status-qualified { background-color: var(--color-status-qualified-bg) !important; }
.bg-status-disqualified { background-color: var(--color-status-disqualified-bg) !important; }

/* AI Score Colors */
.text-score-high { color: var(--color-score-high) !important; }
.text-score-medium { color: var(--color-score-medium) !important; }
.text-score-low { color: var(--color-score-low) !important; }

.bg-score-high { background-color: var(--color-score-high) !important; }
.bg-score-medium { background-color: var(--color-score-medium) !important; }
.bg-score-low { background-color: var(--color-score-low) !important; }

.border-score-high { border-color: var(--color-score-high-border) !important; }
.border-score-medium { border-color: var(--color-score-medium-border) !important; }
.border-score-low { border-color: var(--color-score-low-border) !important; }

/* Feedback Colors */
.text-feedback-like { color: var(--color-feedback-like) !important; }
.text-feedback-dislike { color: var(--color-feedback-dislike) !important; }

.bg-feedback-like { background-color: var(--color-feedback-like) !important; }
.bg-feedback-dislike { background-color: var(--color-feedback-dislike) !important; }

.border-feedback-like { border-color: var(--color-feedback-like) !important; }
.border-feedback-dislike { border-color: var(--color-feedback-dislike) !important; }

/* Gray Scale Utilities */
.text-gray-50 { color: var(--color-gray-50) !important; }
.text-gray-100 { color: var(--color-gray-100) !important; }
.text-gray-200 { color: var(--color-gray-200) !important; }
.text-gray-300 { color: var(--color-gray-300) !important; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-800 { color: var(--color-gray-800) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-300 { background-color: var(--color-gray-300) !important; }
.bg-gray-400 { background-color: var(--color-gray-400) !important; }
.bg-gray-500 { background-color: var(--color-gray-500) !important; }
.bg-gray-600 { background-color: var(--color-gray-600) !important; }
.bg-gray-700 { background-color: var(--color-gray-700) !important; }
.bg-gray-800 { background-color: var(--color-gray-800) !important; }
.bg-gray-900 { background-color: var(--color-gray-900) !important; }

/* Tone Badge Utilities */
.bg-tone-formal { background-color: var(--color-tone-formal) !important; color: white !important; }
.bg-tone-professional { background-color: var(--color-tone-professional) !important; color: white !important; }
.bg-tone-friendly { background-color: var(--color-tone-friendly) !important; color: var(--color-gray-800) !important; }

/* Timeline Colors */
.bg-timeline-default { background-color: var(--color-timeline-default) !important; }
.bg-timeline-manual { background-color: var(--color-timeline-manual) !important; }
.bg-timeline-extension { background-color: var(--color-timeline-extension) !important; }
.bg-timeline-api { background-color: var(--color-timeline-api) !important; }
.bg-timeline-validation { background-color: var(--color-timeline-validation) !important; }