/* 
===========================================================================
OLI MVP - Comprehensive Color System Based on Visual Wireframes
===========================================================================
Complete implementation of all UI colors from wireframe specifications
*/

:root {
  /* ===== EXACT COLORS FROM WIREFRAME SPECIFICATIONS ===== */
  
  /* Navigation Colors (modern minimal) */
  --color-nav-bg: #FFFFFF;                 /* Clean white header */
  --color-nav-text: #0F172A;               /* Slate-900 */
  --color-nav-links: #4F46E5;              /* Indigo-600 */
  
  /* Primary Action (Indigo) */
  --color-btn-primary-bg: #4F46E5;         /* Indigo-600 */
  --color-btn-primary-hover: #4338CA;      /* Indigo-700 */
  --color-btn-primary-text: #FFFFFF;       /* White */
  
  /* Secondary Action (Cyan) */
  --color-btn-secondary-bg: #06B6D4;       /* Cyan-500 */
  --color-btn-secondary-hover: #0891B2;    /* Cyan-600 */
  --color-btn-secondary-text: #FFFFFF;     /* White */
  
  /* Step 3 & 4 (use primary accent) */
  --color-step3-icon-btn-border: #4F46E5;  /* Indigo-600 */
  --color-step3-icon-btn-hover: #4338CA;   /* Indigo-700 */
  --color-step3-icon-btn-icon: #FFFFFF;    /* White */
  
  --color-step4-btn-bg: #4F46E5;           /* Indigo-600 */
  --color-step4-btn-hover: #4338CA;        /* Indigo-700 */
  --color-step4-btn-text: #FFFFFF;         /* White */
  
  /* Surface Colors */
  --color-card-bg: #FFFFFF;                /* Card/box backgrounds - White */
  --color-card-border: #E5E7EB;            /* Gray-200 */
  --color-bg-secondary: #F8FAFC;           /* Slate-50 */
  
  /* Modal Colors */
  --color-modal-bg: #F8FAFC;               /* Slate-50 */
  --color-modal-card-bg: #FFFFFF;          /* White */
  
  /* Text Colors */
  --color-heading-primary: #0F172A;        /* Slate-900 */
  --color-text-primary: #0F172A;           /* Slate-900 */
  --color-text-secondary: #334155;         /* Slate-600 */
  --color-text-tertiary: #94A3B8;          /* Slate-400 */
  --color-text-inverse: #FFFFFF;           /* Inverse text (on dark backgrounds) - WHITE */
  
  /* Account-specific text */
  --color-account-name: #0F172A;           /* Match primary text */
  
  /* Input/Form Colors */
  --color-input-bg: #FFFFFF;               /* White */
  --color-input-border: #D1D5DB;           /* Gray-300 */
  --color-input-border-focus: #4F46E5;     /* Indigo-600 */
  --color-input-text: #0F172A;             /* Slate-900 */
  --color-input-placeholder: #94A3B8;      /* Slate-400 */
  
  /* Textarea-specific (same as inputs) */
  --color-textarea-bg: #FFFFFF;            /* White */
  --color-textarea-border: #E5E7EB;        /* Gray-200 */
  --color-textarea-text: #0F172A;          /* Slate-900 */
  --color-textarea-placeholder: #94A3B8;   /* Slate-400 */
  
  /* Results Box (same as inputs) */
  --color-results-bg: #FFFFFF;             /* White */
  --color-results-border: #E5E7EB;         /* Gray-200 */
  --color-results-text: #0F172A;           /* Slate-900 */
  --color-results-placeholder: #94A3B8;    /* Slate-400 */
  
  /* Microphone Button */
  --color-btn-mic-bg: #2642C4;             /* Microphone button background - BLUE */
  --color-btn-mic-icon: #FFFFFF;           /* Microphone icon - WHITE */
  --color-btn-mic-hover: #1F38A4;          /* Microphone button hover - DARKER BLUE */
  
  /* Extract Button */
  --color-btn-extract-bg: #4F46E5;         /* Indigo-600 */
  --color-btn-extract-text: #FFFFFF;       /* White */
  --color-btn-extract-hover: #4338CA;      /* Indigo-700 */
  
  /* Border Colors */
  --color-border-primary: #E5E7EB;         /* Gray-200 */
  --color-border-secondary: #CBD5E1;       /* Slate-300 */
  --color-border-focus: #4F46E5;           /* Indigo-600 */
  
  /* Status Colors (keeping accessibility standards) */
  --color-success: #10B981;                /* Emerald-500 */
  --color-success-light: #ECFDF5;          /* Emerald-50 */
  --color-success-text: #065F46;           /* Emerald-700 */
  
  --color-warning: #F59E0B;                /* Amber-500 */
  --color-warning-light: #FEF3C7;          /* Amber-100 */
  --color-warning-text: #92400E;           /* Amber-700 */
  
  --color-error: #EF4444;                  /* Red-500 */
  --color-error-light: #FEE2E2;            /* Red-100 */
  --color-error-text: #991B1B;             /* Red-700 */
  
  /* Primary semantic tokens (for consistency) */
  --color-primary: #4F46E5;                /* Indigo-600 */
  --color-primary-hover: #4338CA;          /* Indigo-700 */
  --color-primary-light: #E0E7FF;          /* Indigo-100 */

  /* Link colors */
  --color-text-link: #4F46E5;              /* Indigo-600 */
  --color-text-link-hover: #4338CA;        /* Indigo-700 */
  
  /* Ghost/Outline Button Colors */
  --color-btn-ghost-bg: rgba(79, 70, 229, 0.12);    /* Indigo tint */
  --color-btn-ghost-text: #4F46E5;                  /* Indigo */
  --color-btn-ghost-border: #4F46E5;                /* Indigo */
  
  /* Shadows */
  --shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 10px 25px 0 rgba(0, 0, 0, 0.2);
  --shadow-primary: 0 4px 14px 0 rgba(79, 70, 229, 0.18);
  --shadow-secondary: 0 4px 14px 0 rgba(6, 182, 212, 0.18);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  --gradient-secondary: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
  
  /* Standard Design System Properties */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
  
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 4px;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
}

/* ===== HUBSPOT MODE THEME OVERRIDES (precise tokens) ===== */
[data-crm-mode="hubspot"] {
  /* Navigation */
  --color-nav-bg: #ffffff;
  --color-nav-text: #090909;
  --color-nav-links: #f57724;

  /* Primary Actions mapped to Ecstasy */
  --color-btn-primary-bg: #f57724;
  --color-btn-primary-hover: #e66b1f;
  --color-btn-primary-text: #ffffff;

  /* Secondary Actions mapped to Ronchi */
  --color-btn-secondary-bg: #f1c84b;
  --color-btn-secondary-hover: #e2b732;
  --color-btn-secondary-text: #090909;

  /* Microphone Buttons (Mix & New Chat) - HubSpot Orange */
  --color-btn-mic-bg: #f57724;           /* Ecstasy - HubSpot primary orange */
  --color-btn-mic-hover: #e66b1f;        /* Darker orange for hover */
  --color-btn-mic-icon: #ffffff;         /* White icon */

  /* Extract Button - HubSpot Dark Orange */
  --color-btn-extract-bg: #d6511a;       /* Dark orange from HubSpot palette */
  --color-btn-extract-hover: #c4481a;    /* Even darker orange for hover */
  --color-btn-extract-text: #ffffff;     /* White text */

  /* Inputs/Focus and Links */
  --color-input-border-focus: #f57724;
  --color-text-link: #f57724;
  --color-text-link-hover: #e66b1f;

  /* Surfaces */
  --color-card-bg: #ffffff;
  --color-card-border: #f6e5a2; /* Sandwisp */
  --color-bg-secondary: #fff9ef; /* warm tint */

  /* Status */
  --color-success: #0f8a5f;
  --color-success-light: #e6f6f0;
  --color-success-text: #0b5c42;

  --color-warning: #f7a62b;
  --color-warning-light: #fff3d9;
  --color-warning-text: #8a5a10;

  --color-error: #d94b3d;
  --color-error-light: #fde6e4;
  --color-error-text: #7f2b24;

  /* Step specifics */
  --color-step3-icon-btn-border: #f7a62b; /* Sea Buckthorn */
  --color-step3-icon-btn-hover: #f57724;  /* Ecstasy */
  --color-step3-icon-btn-icon: #ffffff;

  --color-step4-btn-bg: #f1c84b;         /* Ronchi */
  --color-step4-btn-hover: #e2b732;
  --color-step4-btn-text: #090909;

  /* Ghost buttons */
  --color-btn-ghost-bg: rgba(245, 119, 36, 0.12);
  --color-btn-ghost-text: #f57724;
  --color-btn-ghost-border: #f57724;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #f7a62b 0%, #f57724 100%);
  --gradient-secondary: linear-gradient(135deg, #f6e5a2 0%, #f1c84b 100%);
}

/* ===== SALESFORCE MODE THEME OVERRIDES (precise tokens) ===== */
[data-crm-mode="salesforce"] {
  /* Navigation */
  --color-nav-bg: #ffffff;
  --color-nav-text: #0f172a;
  --color-nav-links: #0084f1;

  /* Primary Actions mapped to Azure Radiance */
  --color-btn-primary-bg: #0084f1;
  --color-btn-primary-hover: #0069c4;
  --color-btn-primary-text: #ffffff;

  /* Secondary Actions mapped to Robin's Egg */
  --color-btn-secondary-bg: #00c3d5;
  --color-btn-secondary-hover: #00a9bb;
  --color-btn-secondary-text: #ffffff;

  /* Inputs/Focus and Links */
  --color-input-border-focus: #0084f1;
  --color-text-link: #0084f1;
  --color-text-link-hover: #0069c4;

  /* Surfaces */
  --color-card-bg: #ffffff;
  --color-card-border: #e3f8ff;
  --color-bg-secondary: #f3fbff;

  /* Status (red and green only) */
  --color-success: #10b981;
  --color-success-light: #ecfdf5;
  --color-success-text: #065f46;

  --color-warning: #ef4444;
  --color-warning-light: #fee2e2;
  --color-warning-text: #b91c1c;

  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-text: #b91c1c;

  /* Step specifics */
  --color-step3-icon-btn-border: #00aff1; /* Cerulean */
  --color-step3-icon-btn-hover: #0084f1;  /* Azure Radiance */
  --color-step3-icon-btn-icon: #ffffff;

  --color-step4-btn-bg: #00c3d5;         /* Robin's Egg */
  --color-step4-btn-hover: #00a9bb;
  --color-step4-btn-text: #ffffff;

  /* Ghost buttons */
  --color-btn-ghost-bg: rgba(0, 132, 241, 0.12);
  --color-btn-ghost-text: #0084f1;
  --color-btn-ghost-border: #0084f1;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00aff1 0%, #0084f1 100%);
  --gradient-secondary: linear-gradient(135deg, #00d7de 0%, #00c3d5 100%);
}

/* ===== COMPONENT STYLES ===== */

/* Navigation Bar */
.navbar {
  background-color: var(--color-nav-bg) !important; /* #F75757 - Red */
  box-shadow: var(--shadow-card);
}

.navbar .navbar-brand,
.navbar .nav-home {
  color: var(--color-nav-text) !important; /* #00C009 - Green */
}

.navbar .nav-link,
.navbar .nav-links a {
  color: var(--color-nav-links) !important; /* #5C8CBC - Light blue */
}

.navbar .nav-link:hover,
.navbar .nav-links a:hover {
  color: var(--color-nav-links) !important; /* Same color on hover */
  opacity: 0.8;
}

/* Step Titles and Headings */
.step-title,
.section-title,
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading-primary) !important; /* #090909 - Dark gray */
}

/* Cards and Containers */
.card,
.panel,
.content-box,
.results-box,
.json-container {
  background-color: var(--color-card-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
  box-shadow: var(--shadow-card);
}

/* Text Colors */
.text-primary,
p, span, div {
  color: var(--color-text-primary); /* #090909 - Dark gray */
}

.text-secondary {
  color: var(--color-text-secondary); /* #575757 - Medium gray */
}

.text-muted,
.help-text,
.caption-text,
small {
  color: var(--color-text-tertiary) !important; /* #BCBCBC - Light gray */
}

/* Account Name Specific */
.account-name,
.name-value {
  color: var(--color-account-name) !important; /* #1B1B1B - Slightly lighter */
}

/* Inputs and Textareas */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
.form-control {
  background-color: var(--color-input-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-input-border) !important; /* #EEF0FC - Light purple */
  color: var(--color-input-text) !important; /* #090909 - Dark gray */
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--color-input-placeholder) !important; /* #BCBCBC - Light gray */
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
.form-control:focus {
  border-color: var(--color-input-border-focus) !important; /* #2642C4 - Blue */
  box-shadow: 0 0 0 0.2rem rgba(38, 66, 196, 0.25) !important;
}

/* Textarea Specific */
.transcript-input,
.textarea-input {
  background-color: var(--color-textarea-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-textarea-border) !important; /* #EEF0FC - Light purple */
  color: var(--color-textarea-text) !important; /* #090909 - Dark gray */
}

.transcript-input::placeholder,
.textarea-input::placeholder {
  color: var(--color-textarea-placeholder) !important; /* #BCBCBC - Light gray */
}

/* Results Box Specific */
.results-container,
.results-area {
  background-color: var(--color-results-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-results-border) !important; /* #EEF0FC - Light purple */
  color: var(--color-results-text) !important; /* #090909 - Dark gray */
}

.results-placeholder {
  color: var(--color-results-placeholder) !important; /* #BCBCBC - Light gray */
}

/* Primary Buttons (Blue) */
.btn-primary,
.btn-extract,
.btn-save,
.btn-next,
.btn-signin {
  background-color: var(--color-btn-primary-bg) !important; /* #2642C4 - Blue */
  border-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important; /* #FFFFFF - White */
}

.btn-primary:hover,
.btn-extract:hover,
.btn-save:hover,
.btn-next:hover,
.btn-signin:hover {
  background-color: var(--color-btn-primary-hover) !important; /* #1F38A4 - Darker blue */
  border-color: var(--color-btn-primary-hover) !important;
  color: var(--color-btn-primary-text) !important; /* #FFFFFF - White */
}

/* Secondary Buttons (Orange) */
.btn-secondary,
.btn-delete,
.btn-warning {
  background-color: var(--color-btn-secondary-bg) !important; /* #E75B30 - Orange */
  border-color: var(--color-btn-secondary-bg) !important;
  color: var(--color-btn-secondary-text) !important; /* #FFFFFF - White */
}

.btn-secondary:hover,
.btn-delete:hover,
.btn-warning:hover {
  background-color: var(--color-btn-secondary-hover) !important; /* #D14419 - Darker orange */
  border-color: var(--color-btn-secondary-hover) !important;
  color: var(--color-btn-secondary-text) !important; /* #FFFFFF - White */
}

/* Ghost/Outline Buttons */
.btn-outline,
.btn-outline-primary,
.btn-ghost,
.btn-cancel,
.btn-previous {
  background-color: var(--color-btn-ghost-bg) !important; /* 20% blue */
  border-color: var(--color-btn-ghost-border) !important; /* #2642C4 - Blue */
  color: var(--color-btn-ghost-text) !important; /* #2642C4 - Blue */
}

.btn-outline:hover,
.btn-outline-primary:hover,
.btn-ghost:hover,
.btn-cancel:hover,
.btn-previous:hover {
  background-color: var(--color-btn-primary-bg) !important; /* #2642C4 - Blue */
  border-color: var(--color-btn-primary-bg) !important;
  color: var(--color-btn-primary-text) !important; /* #FFFFFF - White */
}

/* Microphone Button */
.btn-mic,
#mic-btn,
#new-chat-btn {
  background-color: var(--color-btn-mic-bg) !important; /* #2642C4 - Blue */
  border-color: var(--color-btn-mic-bg) !important;
  color: var(--color-btn-mic-icon) !important; /* #FFFFFF - White */
  border-radius: var(--border-radius-full) !important; /* Circle */
  min-width: 40px;
  height: 40px;
}

.btn-mic:hover,
#mic-btn:hover,
#new-chat-btn:hover {
  background-color: var(--color-btn-mic-hover) !important; /* #1F38A4 - Darker blue */
  border-color: var(--color-btn-mic-hover) !important;
  color: var(--color-btn-mic-icon) !important; /* #FFFFFF - White */
}

.btn-mic i,
.btn-mic svg,
#mic-btn i,
#mic-btn svg,
#new-chat-btn i,
#new-chat-btn svg {
  color: var(--color-btn-mic-icon) !important; /* #FFFFFF - White */
}

/* Extract Button */
.btn-extract,
#extract-btn {
  background-color: var(--color-btn-extract-bg) !important; /* #2642C4 - Blue */
  border-color: var(--color-btn-extract-bg) !important;
  color: var(--color-btn-extract-text) !important; /* #FFFFFF - White */
  width: 100%; /* Full width as specified */
}

.btn-extract:hover,
#extract-btn:hover {
  background-color: var(--color-btn-extract-hover) !important; /* #1F38A4 - Darker blue */
  border-color: var(--color-btn-extract-hover) !important;
  color: var(--color-btn-extract-text) !important; /* #FFFFFF - White */
}

/* Step 3 - Small Icon Buttons */
.step3-icon-btn,
.icon-btn-small,
.btn-icon-small,
.step3 .btn-icon {
  background-color: transparent !important;
  border-color: var(--color-step3-icon-btn-border) !important; /* #7E5B30 - Brown */
  color: var(--color-step3-icon-btn-icon) !important; /* #FFFFFF - White */
}

.step3-icon-btn:hover,
.icon-btn-small:hover,
.btn-icon-small:hover,
.step3 .btn-icon:hover {
  background-color: var(--color-step3-icon-btn-hover) !important; /* #D14419 - Dark orange */
  border-color: var(--color-step3-icon-btn-hover) !important;
  color: var(--color-step3-icon-btn-icon) !important; /* #FFFFFF - White */
}

.step3-icon-btn i,
.step3-icon-btn svg,
.icon-btn-small i,
.icon-btn-small svg,
.btn-icon-small i,
.btn-icon-small svg {
  color: var(--color-step3-icon-btn-icon) !important; /* #FFFFFF - White */
}

/* Step 4 - Confirm Button */
.step4-btn,
.btn-confirm,
.btn-push,
.step4 .btn-primary {
  background-color: var(--color-step4-btn-bg) !important; /* #7E5B30 - Brown */
  border-color: var(--color-step4-btn-bg) !important;
  color: var(--color-step4-btn-text) !important; /* #FFFFFF - White */
}

.step4-btn:hover,
.btn-confirm:hover,
.btn-push:hover,
.step4 .btn-primary:hover {
  background-color: var(--color-step4-btn-hover) !important; /* #D14419 - Dark orange */
  border-color: var(--color-step4-btn-hover) !important;
  color: var(--color-step4-btn-text) !important; /* #FFFFFF - White */
}

/* Modals */
.modal-content {
  background-color: var(--color-modal-bg) !important; /* #F7F7F7 - Light gray */
  border-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
}

.modal-body .card,
.modal-body .panel {
  background-color: var(--color-modal-card-bg) !important; /* #FFFFFF - White */
}

.modal-header {
  border-bottom-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
}

.modal-footer {
  border-top-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
}

.modal-title {
  color: var(--color-text-primary) !important; /* #090909 - Dark gray */
}

.btn-close {
  color: var(--color-text-primary) !important; /* #090909 - Dark gray */
}

/* Salesforce Push Preview Styles */
.salesforce-preview {
  background-color: var(--color-bg-secondary); /* #F7F7F7 - Light gray */
}

.progress-bar {
  background-color: var(--color-primary); /* #2642C4 - Blue */
}

.auto-selected-banner {
  background-color: rgba(239, 68, 68, 0.2); /* Error color with 20% opacity */
  border-color: var(--color-error); /* #EF4444 - Red */
  color: var(--color-error-text); /* #B91C1C - Dark red */
}

.create-new-account-card,
.recommended-match-card {
  background-color: var(--color-bg-secondary) !important; /* #F7F7F7 - Light gray */
  border-color: var(--color-border-secondary) !important; /* #BCBCBC - Light gray */
}

.push-summary {
  background-color: var(--color-btn-secondary-bg) !important; /* #E75B30 - Orange */
  color: var(--color-text-inverse) !important; /* #FFFFFF - White */
}

/* Profile Settings */
.profile-card,
.settings-card {
  background-color: var(--color-card-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
}

.delete-warning {
  background-color: var(--color-error) !important; /* #EF4444 - Red */
  color: var(--color-text-inverse) !important; /* #FFFFFF - White */
}

/* Admin Panel */
.admin-table {
  background-color: var(--color-card-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
}

.admin-table tr {
  border-bottom-color: var(--color-border-secondary) !important; /* #BCBCBC - Light gray */
}

.badge-pending {
  background-color: var(--color-btn-secondary-bg) !important; /* #E75B30 - Orange */
  color: var(--color-text-inverse) !important; /* #FFFFFF - White */
}

.badge-used {
  background-color: var(--color-primary) !important; /* #2642C4 - Blue */
  color: var(--color-text-inverse) !important; /* #FFFFFF - White */
}

/* Login Page */
.login-card {
  background-color: var(--color-card-bg) !important; /* #FFFFFF - White */
  border-color: var(--color-card-border) !important; /* #EEF0FC - Light purple */
  box-shadow: var(--shadow-modal);
}

/* Status Alerts */
.alert-success {
  background-color: var(--color-success-light) !important; /* #D1FAE5 - Light green */
  border-color: var(--color-success) !important; /* #10B981 - Green */
  color: var(--color-success-text) !important; /* #047857 - Dark green */
}

.alert-warning {
  background-color: var(--color-warning-light) !important; /* #FEF3C7 - Light orange */
  border-color: var(--color-warning) !important; /* #F59E0B - Orange */
  color: var(--color-warning-text) !important; /* #B45309 - Dark orange */
}

.alert-danger {
  background-color: var(--color-error-light) !important; /* #FEE2E2 - Light red */
  border-color: var(--color-error) !important; /* #EF4444 - Red */
  color: var(--color-error-text) !important; /* #B91C1C - Dark red */
}

/* Data Attributes for Step-specific Styling */
[data-step="1"] .btn-primary {
  background-color: var(--color-btn-extract-bg) !important; /* #2642C4 - Blue */
}

[data-step="3"] .btn-icon {
  border-color: var(--color-step3-icon-btn-border) !important; /* #7E5B30 - Brown */
}

[data-step="4"] .btn-primary {
  background-color: var(--color-step4-btn-bg) !important; /* #7E5B30 - Brown */
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar .nav-links {
    color: var(--color-nav-links) !important; /* #5C8CBC - Light blue */
  }
  
  .btn-extract {
    width: 100% !important; /* Full width on mobile */
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-card-bg: #2d2d2d;
    --color-modal-bg: #1a1a1a;
    --color-modal-card-bg: #2d2d2d;
    --color-bg-secondary: #404040;
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #B0B0B0;
    --color-input-bg: #404040;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --color-border-primary: #000000;
    --color-border-secondary: #333333;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: none;
    --transition-normal: none;
    --transition-slow: none;
  }
}