/* CSS Variables - Dual Theme Design System */
:root {
  /* Default Theme: Enhanced ZENITH Orange */
  /* Primary Colors */
  --color-primary-bg: #0F172A;        /* Deep navy background for better contrast */
  --color-secondary-bg: #1E293B;      /* Slightly lighter background for cards */
  --color-tertiary-bg: #334155;       /* Lighter for secondary elements */
  --color-quaternary-bg: #475569;     /* Even lighter for nested elements */
  
  /* Accent Colors - Enhanced ZENITH Orange Theme */
  --color-primary-accent: #F97316;    /* Orange-500 - Vibrant ZENITH orange */
  --color-secondary-accent: #EA580C;  /* Orange-600 - Hover states */
  --color-accent-hover: #DC2626;      /* Red-600 - Strong hover emphasis */
  --color-accent-dark: #C2410C;       /* Orange-700 - Pressed states */
  
  /* Text Colors */
  --color-text-primary: #F8FAFC;      /* Slate-50 - Off-white for better readability */
  --color-text-secondary: #CBD5E1;    /* Slate-300 - Light gray for secondary text */
  --color-text-muted: #94A3B8;        /* Slate-400 - Muted text */
  --color-text-inverse: #0F172A;      /* Navy background for light surfaces */
  
  /* Status Colors */
  --color-positive: #22C55E;          /* Green-500 for gains */
  --color-negative: #EF4444;          /* Red for losses */
  --color-neutral: #6B7280;           /* Grey */
  --color-warning: #F59E0B;           /* Amber for warnings */
  --color-info: #3B82F6;              /* Blue for information */
  
  /* Chart Colors */
  --color-chart-primary: #F97316;     /* Orange-500 - Primary chart color */
  --color-chart-secondary: #EA580C;   /* Orange-600 - Secondary chart color */
  --color-chart-tertiary: #60A5FA;    /* Blue-400 - Contrast color */
  --color-chart-positive: #22C55E;    /* Green-500 - Positive trends */
  --color-chart-negative: #EF4444;    /* Red-500 - Negative trends */
  --color-chart-gradient-start: #F97316;
  --color-chart-gradient-end: #EA580C;
  
  /* Border Colors */
  --color-border-default: #334155;    /* Slate-700 - Default borders */
  --color-border-focus: #F97316;      /* Orange-500 - Focus states */
  --color-border-light: #475569;      /* Slate-600 - Light borders */
  --color-border-dark: #1E293B;       /* Slate-800 - Dark borders */
  --color-border-strong: #64748B;     /* Slate-500 - Strong borders */
  --color-border-subtle: #2D3748;     /* Subtle separation borders */
  --color-border-footer-primary: rgba(122, 90, 47, 0.45);
  --color-border-footer-secondary: rgba(122, 90, 47, 0.35);
  
  /* Navigation */
  --nav-style: sidebar;               /* sidebar or topbar */
  --nav-bg: #181411;
  --nav-border: #54453b;
  --nav-active-bg: #A04810;
  --nav-hover-bg: #27201c;
  
  /* Typography */
  --font-heading: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Spacing */
  --space-xs: 0.25rem;     /* 4px */
  --space-sm: 0.5rem;      /* 8px */
  --space-md: 1rem;        /* 16px */
  --space-lg: 1.5rem;      /* 24px */
  --space-xl: 2rem;        /* 32px */
  --space-2xl: 3rem;       /* 48px */
  --space-3xl: 4rem;       /* 64px */
  
  /* Border Radius - Updated to use squircle values */
  --radius-sm: var(--squircle-xs);
  --radius-md: var(--squircle-sm);
  --radius-lg: var(--squircle-md);
  --radius-xl: var(--squircle-lg);
  --radius-full: var(--squircle-full);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-card: 0px 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0px 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  
  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;
  
  /* Z-index Scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-modal: 999;
  --z-tooltip: 9999;
  
  /* Breakpoints (for reference) */
  --screen-sm: 640px;
  --screen-md: 768px;
  --screen-lg: 1024px;
  --screen-xl: 1280px;
  --screen-2xl: 1536px;
}

/* Dark Theme (Original IGNITION Style) - WCAG AAA Compliant */
[data-theme="dark"] {
  /* Primary Colors */
  --color-primary-bg: #121212;        /* Soft black (not pure black) for better readability */
  --color-secondary-bg: #1E1E1E;      /* Card backgrounds - matches IGNITION design */
  --color-tertiary-bg: #2A2A2A;       /* Input backgrounds - matches IGNITION design */
  --color-quaternary-bg: #333333;     /* Even lighter for nested elements */
  
  /* Accent Colors */
  --color-primary-accent: #58A6FF;    /* GitHub blue for dark mode accessibility */
  --color-secondary-accent: #79C0FF;  /* Lighter blue for hover states */
  --color-accent-hover: #388BFD;      /* Darker blue for hover */
  --color-accent-dark: #1F6FEB;       /* Much darker blue for pressed states */
  
  /* Text Colors - WCAG AAA Compliant (7:1 contrast) */
  --color-text-primary: #E6EDF3;      /* GitHub dark mode primary text - 13.1:1 contrast */
  --color-text-secondary: #B0B0B0;    /* Medium grey - 7.2:1 contrast (FIXED) */
  --color-text-muted: #8B949E;        /* GitHub dark mode muted - 5.1:1 contrast (FIXED) */
  --color-text-headers: #F0F6FC;      /* GitHub dark mode headers - 15.3:1 contrast */
  --color-text-inverse: #0D1117;      /* GitHub dark mode background for light surfaces */
  
  /* Status Colors */
  --color-positive: #4ADE80;          /* Green for gains */
  --color-negative: #EF4444;          /* Red for losses */
  --color-neutral: #888888;           /* Medium Grey */
  --color-warning: #F59E0B;           /* Amber for warnings */
  --color-info: #3B82F6;              /* Blue for information */
  
  /* Chart Colors */
  --color-chart-primary: #C05A15;     /* Primary chart color */
  --color-chart-secondary: #D06A25;   /* Secondary chart color */
  --color-chart-tertiary: #60A5FA;    /* Blue for contrast */
  --color-chart-positive: #4ADE80;    /* Green for positive trends */
  --color-chart-negative: #EF4444;    /* Red for negative trends */
  --color-chart-gradient-start: #C05A15;
  --color-chart-gradient-end: #D06A25;
  
  /* Border Colors */
  --color-border-default: #333333;
  --color-border-focus: #C05A15;
  --color-border-light: #444444;
  --color-border-dark: #222222;
  --color-border-strong: #555555;     /* Stronger/darker border for emphasis */
  --color-border-subtle: #2A2A2A;     /* Subtle border for minimal separation */
  --color-border-footer-primary: rgba(88, 166, 255, 0.45);
  --color-border-footer-secondary: rgba(88, 166, 255, 0.35);
  
  /* Navigation */
  --nav-style: sidebar;               /* sidebar or topbar */
  --nav-bg: #1a1a1a;
  --nav-border: #333333;
  --nav-active-bg: #C05A15;
  --nav-hover-bg: #2d2d2d;
}

/* Navy Theme (CoinBot Style) */
[data-theme="navy"] {
  /* Primary Colors */
  --color-primary-bg: #0F172A;        /* Deep navy blue (main background) */
  --color-secondary-bg: #1E293B;      /* Slightly lighter navy (card backgrounds) */
  --color-tertiary-bg: #334155;       /* Lighter navy for depth */
  --color-quaternary-bg: #475569;     /* Even lighter for nested elements */
  
  /* Keep same accent colors for consistency */
  --color-primary-accent: #C05A15;    /* Darker IGNITION Orange (CTAs, active states) */
  --color-secondary-accent: #D06A25;  /* Slightly lighter Orange (hover states) */
  --color-accent-hover: #A04A10;      /* Even darker orange for hover */
  --color-accent-dark: #8A3A0A;       /* Much darker orange for pressed states */
  
  /* Text Colors */
  --color-text-primary: #E2E8F0;      /* Light blue-grey */
  --color-text-secondary: #94A3B8;    /* Medium blue-grey */
  --color-text-muted: #64748B;        /* Darker blue-grey for disabled */
  --color-text-inverse: #0F172A;     /* Navy text on light backgrounds */
  
  /* Status Colors - More vibrant for navy theme */
  --color-positive: #10B981;          /* Emerald green for gains */
  --color-negative: #EF4444;          /* Red for losses */
  --color-neutral: #6B7280;           /* Grey */
  --color-warning: #F59E0B;           /* Amber for warnings */
  --color-info: #3B82F6;              /* Blue for information */
  
  /* Chart Colors with gradients */
  --color-chart-primary: #C05A15;     /* Primary chart color */
  --color-chart-secondary: #D06A25;   /* Secondary chart color */
  --color-chart-tertiary: #60A5FA;    /* Blue for contrast */
  --color-chart-positive: #10B981;    /* Green for positive trends */
  --color-chart-negative: #EF4444;    /* Red for negative trends */
  --color-chart-gradient-start: #C05A15;
  --color-chart-gradient-end: #8A3A0A;
  
  /* Border Colors */
  --color-border-default: #334155;
  --color-border-focus: #C05A15;
  --color-border-light: #475569;
  --color-border-dark: #1E293B;
  --color-border-strong: #475569;     /* Stronger/darker border for emphasis */
  --color-border-subtle: #2D3748;     /* Subtle border for minimal separation */
  --color-border-footer-primary: rgba(192, 90, 21, 0.45);
  --color-border-footer-secondary: rgba(192, 90, 21, 0.35);
  
  /* Navigation - Top bar style for navy theme */
  --nav-style: topbar;                /* topbar navigation */
  --nav-bg: #0F172A;
  --nav-border: #1E293B;
  --nav-active-bg: transparent;
  --nav-hover-bg: #1E293B;
  
  /* Navy theme specific */
  --gradient-bg: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
  --gradient-card: linear-gradient(135deg, #1E293B 0%, #334155 100%);
}

/* Amber Theme (Pricing Page Style) */
[data-theme="amber"] {
  /* Primary Colors */
  --color-primary-bg: #181411;        /* Main dark background (almost black) */
  --color-secondary-bg: #27201c;      /* Slightly lighter dark background for cards */
  --color-tertiary-bg: #392f28;       /* Dark brown/gray for secondary buttons and borders */
  --color-quaternary-bg: #3A3028;     /* Even lighter for nested elements */
  
  /* Accent Colors */
  --color-primary-accent: #A04810;    /* Much darker orange (was #EF6F1A) */
  --color-secondary-accent: #B85820;  /* Darker orange for hover (was #FB923C) */
  --color-accent-hover: #8A3A0A;      /* Even darker orange for hover */
  --color-accent-dark: #702F08;       /* Very dark orange for pressed states */
  
  /* Text Colors */
  --color-text-primary: #FFFFFF;      /* Pure white for better contrast */
  --color-text-secondary: #b9a89d;    /* Light brown/beige for muted text */
  --color-text-muted: #8A7A70;        /* Darker beige for disabled */
  --color-text-inverse: #181411;      /* Dark background color on light backgrounds */
  
  /* Status Colors */
  --color-positive: #22C55E;          /* Green-500 for gains */
  --color-negative: #EF4444;          /* Red for losses */
  --color-neutral: #6B7280;           /* Grey */
  --color-warning: #F59E0B;           /* Amber for warnings */
  --color-info: #3B82F6;              /* Blue for information */
  
  /* Border Colors */
  --color-border-default: #54453b;    /* Brown border color for cards */
  --color-border-focus: #A04810;      /* Darker orange for focus */
  --color-border-light: #6A5A4F;      /* Lighter brown */
  --color-border-dark: #392f28;       /* Dark brown/gray */
  --color-border-strong: #7A6A5F;     /* Stronger/darker border for emphasis */
  --color-border-subtle: #44393F;     /* Subtle border for minimal separation */
  --color-border-footer-primary: rgba(160, 72, 16, 0.45);
  --color-border-footer-secondary: rgba(160, 72, 16, 0.35);
}

/* Light Theme - WCAG AAA Compliant */
[data-theme="light"] {
  /* Primary Colors - Darker, muted blue-gray palette */
  --color-primary-bg: #FFFFFF;          /* Pure white background for maximum contrast */
  --color-secondary-bg: #F8FAFC;        /* Slate-50 for cards */
  --color-tertiary-bg: #F1F5F9;         /* Slate-100 for inputs */
  --color-quaternary-bg: #E2E8F0;       /* Slate-200 for nested elements */
  
  /* Accent Colors - Vibrant orange that pops */
  --color-primary-accent: #EA580C;      /* Orange-600 - vibrant and accessible */
  --color-secondary-accent: #FB923C;    /* Orange-400 for hover */
  --color-accent-hover: #DC2626;        /* Red-600 for strong hover */
  --color-accent-dark: #C2410C;         /* Orange-700 for pressed states */
  
  /* Text Colors - WCAG AAA Compliant (7:1 contrast) */
  --color-text-primary: #0F172A;        /* Slate-900 - 21:1 contrast on white */
  --color-text-secondary: #334155;      /* Slate-700 - 8.9:1 contrast (FIXED) */
  --color-text-muted: #475569;          /* Slate-600 - 6.4:1 contrast (FIXED) */
  --color-text-headers: #000000;        /* Pure black for headers - 21:1 contrast */
  --color-text-inverse: #FFFFFF;        /* Pure white on dark backgrounds */
  
  /* Status Colors - Bold and clear */
  --color-positive: #16A34A;            /* Green-600 - vibrant success */
  --color-negative: #DC2626;            /* Red-600 - clear danger */
  --color-neutral: #6B7280;             /* Gray-500 */
  --color-warning: #EA580C;             /* Orange-600 for warnings */
  --color-info: #2563EB;                /* Blue-600 for information */
  
  /* Chart Colors */
  --color-chart-primary: #EA580C;       /* Primary chart color */
  --color-chart-secondary: #FB923C;     /* Secondary chart color */
  --color-chart-tertiary: #2563EB;      /* Blue for contrast */
  --color-chart-positive: #16A34A;      /* Green for positive trends */
  --color-chart-negative: #DC2626;      /* Red for negative trends */
  --color-chart-gradient-start: #EA580C;
  --color-chart-gradient-end: #FB923C;
  
  /* Border Colors - Subtle slate borders */
  --color-border-default: #E2E8F0;      /* Slate-200 */
  --color-border-focus: #EA580C;        /* Orange for focus */
  --color-border-light: #F1F5F9;        /* Slate-100 */
  --color-border-dark: #CBD5E1;         /* Slate-300 */
  --color-border-strong: #94A3B8;       /* Slate-400 - Stronger border for emphasis */
  --color-border-subtle: #F1F5F9;       /* Slate-100 - Subtle border for minimal separation */
  --color-border-footer-primary: rgba(234, 88, 12, 0.45);
  --color-border-footer-secondary: rgba(234, 88, 12, 0.35);
  
  /* Navigation */
  --nav-style: sidebar;                 /* sidebar navigation */
  --nav-bg: #FFFFFF;
  --nav-border: #E2E8F0;
  --nav-active-bg: #EA580C;
  --nav-hover-bg: #F8FAFC;
  
  /* Shadows - Subtle blue-tinted shadows */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 4px 6px rgba(15, 23, 42, 0.1), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-inset: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06);
}

/* High Contrast Overlay - WCAG AAA Maximum Contrast */
[data-contrast="high"] {
  /* Primary Colors - Maximum contrast */
  --color-primary-bg: #FFFFFF;          /* Pure white background */
  --color-secondary-bg: #FFFFFF;        /* Pure white for cards */
  --color-tertiary-bg: #F5F5F5;         /* Very light gray for inputs */
  --color-quaternary-bg: #EEEEEE;       /* Light gray for nested elements */

  /* Accent Colors - High contrast blue */
  --color-primary-accent: #0066CC;      /* Strong blue for maximum contrast */
  --color-secondary-accent: #004499;    /* Darker blue for hover */
  --color-accent-hover: #003366;        /* Even darker blue for hover */
  --color-accent-dark: #002244;         /* Very dark blue for pressed states */

  /* Text Colors - Maximum contrast (21:1) */
  --color-text-primary: #000000;        /* Pure black - 21:1 contrast */
  --color-text-secondary: #000000;      /* Pure black for all text */
  --color-text-muted: #333333;          /* Dark gray for disabled - 12.6:1 contrast */
  --color-text-headers: #000000;        /* Pure black for headers */
  --color-text-inverse: #FFFFFF;        /* Pure white on dark backgrounds */

  /* Status Colors - High contrast */
  --color-positive: #008000;            /* Dark green for gains */
  --color-negative: #CC0000;            /* Dark red for losses */
  --color-neutral: #666666;             /* Dark gray */
  --color-warning: #FF8C00;             /* Dark orange for warnings */
  --color-info: #0066CC;                /* Dark blue for information */

  /* Border Colors - High contrast */
  --color-border-default: #000000;      /* Black borders */
  --color-border-focus: #0066CC;        /* Blue for focus */
  --color-border-light: #333333;        /* Dark gray */
  --color-border-dark: #000000;         /* Black */
  --color-border-strong: #000000;       /* Black for emphasis */
  --color-border-subtle: #666666;       /* Dark gray for subtle borders */

  /* Shadows - High contrast */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

/* Maximum Contrast Overlay - WCAG AAA Extreme Contrast */
[data-contrast="maximum"] {
  /* Primary Colors - Maximum contrast */
  --color-primary-bg: #000000;          /* Pure black background */
  --color-secondary-bg: #000000;        /* Pure black for cards */
  --color-tertiary-bg: #1A1A1A;         /* Very dark gray for inputs */
  --color-quaternary-bg: #2A2A2A;       /* Dark gray for nested elements */

  /* Accent Colors - High contrast yellow */
  --color-primary-accent: #FFFF00;      /* Pure yellow for maximum contrast */
  --color-secondary-accent: #FFFF66;    /* Light yellow for hover */
  --color-accent-hover: #CCCC00;        /* Darker yellow for hover */
  --color-accent-dark: #999900;         /* Even darker yellow for pressed states */

  /* Text Colors - Maximum contrast (21:1) */
  --color-text-primary: #FFFFFF;        /* Pure white - 21:1 contrast */
  --color-text-secondary: #FFFFFF;      /* Pure white for all text */
  --color-text-muted: #CCCCCC;          /* Light gray for disabled - 12.6:1 contrast */
  --color-text-headers: #FFFFFF;        /* Pure white for headers */
  --color-text-inverse: #000000;        /* Pure black on light backgrounds */

  /* Status Colors - High contrast */
  --color-positive: #00FF00;            /* Bright green for gains */
  --color-negative: #FF0000;            /* Bright red for losses */
  --color-neutral: #CCCCCC;             /* Light gray */
  --color-warning: #FFFF00;             /* Bright yellow for warnings */
  --color-info: #00FFFF;                /* Bright cyan for information */

  /* Border Colors - High contrast */
  --color-border-default: #FFFFFF;      /* White borders */
  --color-border-focus: #FFFF00;        /* Yellow for focus */
  --color-border-light: #CCCCCC;        /* Light gray */
  --color-border-dark: #FFFFFF;         /* White */
  --color-border-strong: #FFFFFF;       /* White for emphasis */
  --color-border-subtle: #666666;       /* Gray for subtle borders */

  /* Shadows - High contrast */
  --shadow-sm: 0 1px 2px 0 rgba(255, 255, 255, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(255, 255, 255, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(255, 255, 255, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(255, 255, 255, 0.4);
  --shadow-card: 0 1px 3px rgba(255, 255, 255, 0.2);
  --shadow-card-hover: 0 4px 6px rgba(255, 255, 255, 0.3);
  --shadow-inset: inset 0 2px 4px 0 rgba(255, 255, 255, 0.2);
}

/* Smooth Theme Transitions */
* {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation CSS Classes - Added for sidebar hover effects */
.nav-item {
  transition: all 0.2s ease-in-out;
  color: var(--color-nav-text-primary, #FFFFFF);
}

/* Hover effects for ALL navigation items (active and inactive) */
.nav-item:hover {
  background-color: var(--color-nav-hover-bg, rgba(243, 244, 246, 0.1)) !important;
  color: var(--color-nav-text-primary, #FFFFFF) !important;
}

/* Active page gets orange highlighting but ALSO gets hover effects */
.nav-item-active {
  background-color: var(--color-nav-active-bg, #A04810) !important;
  color: var(--color-nav-active-text, #FFFFFF) !important;
  border: 1px solid var(--color-nav-active-bg, #A04810);
}

/* Active page hover effect - slightly different color */
.nav-item-active:hover {
  background-color: var(--color-nav-active-hover-bg, rgba(160, 72, 16, 0.9)) !important;
  color: var(--color-nav-active-text, #FFFFFF) !important;
}

.nav-button {
  transition: all 0.2s ease-in-out;
  color: var(--color-nav-text-secondary, #CBD5E1);
}

.nav-button:hover {
  background-color: var(--color-nav-hover-bg, rgba(249, 115, 22, 0.2)) !important;
  color: var(--color-nav-text-primary, #FFFFFF) !important;
}

/* Navigation Colors for All Themes */
:root {
  --color-nav-text-primary: #FFFFFF;
  --color-nav-text-secondary: #CBD5E1;
  --color-nav-text-muted: #94A3B8;
  --color-nav-hover-bg: rgba(249, 115, 22, 0.2);
  --color-nav-active-bg: #F97316;
  --color-nav-active-text: #FFFFFF;
  --color-nav-active-hover-bg: rgba(249, 115, 22, 0.9);
}

[data-theme="light"] {
  --color-nav-text-primary: #111827;
  --color-nav-text-secondary: #4B5563;
  --color-nav-text-muted: #6B7280;
  --color-nav-hover-bg: rgba(160, 72, 16, 0.15);
  --color-nav-active-bg: #A04810;
  --color-nav-active-text: #FFFFFF;
  --color-nav-active-hover-bg: rgba(160, 72, 16, 0.9);
}

[data-theme="dark"] {
  --color-nav-text-primary: #F8FAFC;
  --color-nav-text-secondary: #CBD5E1;
  --color-nav-text-muted: #94A3B8;
  --color-nav-hover-bg: rgba(249, 115, 22, 0.2);
  --color-nav-active-bg: #F97316;
  --color-nav-active-text: #FFFFFF;
  --color-nav-active-hover-bg: rgba(249, 115, 22, 0.9);
}

[data-theme="navy"] {
  --color-nav-text-primary: #F8FAFC;
  --color-nav-text-secondary: #CBD5E1;
  --color-nav-text-muted: #94A3B8;
  --color-nav-hover-bg: rgba(59, 130, 246, 0.2);
  --color-nav-active-bg: #3B82F6;
  --color-nav-active-text: #FFFFFF;
  --color-nav-active-hover-bg: rgba(59, 130, 246, 0.9);
}

[data-theme="amber"] {
  --color-nav-text-primary: #FFFFFF;
  --color-nav-text-secondary: #b9a89d;
  --color-nav-text-muted: #8A7A70;
  --color-nav-hover-bg: rgba(160, 72, 16, 0.3);
  --color-nav-active-bg: #A04810;
  --color-nav-active-text: #FFFFFF;
  --color-nav-active-hover-bg: rgba(160, 72, 16, 0.9);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable theme transition animations */
  [data-theme] * {
    transition: none !important;
  }
}