/* OTR Marketing Theme Overrides */
/* Layers on top of :root variables from variables.css */
/* Two-axis system: data-theme (palette) + data-mode (light/dark) */

/* ── Light mode for default theme (Midnight Amber) ── */
[data-mode="light"] {
  --color-void: #fafaf9;
  --color-void-rgb: 250, 250, 249;
  --color-surface: #ffffff;
  --color-surface-raised: #f5f5f4;
  --color-border: #e7e5e4;
  --color-border-light: #d6d3d1;
  --color-text-primary: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-muted: #a8a29e;
  --color-accent: #d97706;
  --color-accent-light: #f59e0b;
  --color-accent-dark: #b45309;
  --color-accent-glow: rgba(217, 119, 6, 0.2);
  --color-accent-subtle: rgba(217, 119, 6, 0.08);
  --color-accent-muted: rgba(217, 119, 6, 0.7);
  --color-orange: #d97706;
  --color-orange-muted: rgba(217, 119, 6, 0.7);
  --color-orange-subtle: rgba(217, 119, 6, 0.08);
  --color-deep-orange: #b45309;
  --color-deep-orange-muted: rgba(180, 83, 9, 0.7);
  --color-deep-orange-subtle: rgba(180, 83, 9, 0.1);
  --color-brick: #7c2d12;
  --color-brick-subtle: rgba(124, 45, 18, 0.1);
  --color-maroon: #7c2d12;
  --color-maroon-muted: rgba(180, 83, 9, 0.8);
  --color-maroon-subtle: rgba(124, 45, 18, 0.08);
  --color-teal: #0d9488;
  --color-teal-light: #14b8a6;
  --color-teal-muted: rgba(13, 148, 136, 0.7);
  --color-teal-subtle: rgba(13, 148, 136, 0.1);
  --color-teal-glow: rgba(13, 148, 136, 0.3);
  --color-success: #059669;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(217, 119, 6, 0.2);
  --shadow-glow-sm: 0 0 20px rgba(217, 119, 6, 0.2);
}

/* ── Fleet Blue ── Deep navy + vibrant orange. Trucking-industry palette. */
[data-theme="fleet-blue"] {
  --color-void: #0a1628;
  --color-void-rgb: 10, 22, 40;
  --color-surface: #0f2035;
  --color-surface-raised: #162d4a;
  --color-border: #1c3a5f;
  --color-border-light: #2a5080;
  --color-text-primary: #e8edf4;
  --color-text-secondary: #8ba3c4;
  --color-text-muted: #5a7da0;
  --color-accent: #ff8c00;
  --color-accent-light: #ffa333;
  --color-accent-dark: #e07800;
  --color-accent-glow: rgba(255, 140, 0, 0.4);
  --color-accent-subtle: rgba(255, 140, 0, 0.1);
  --color-accent-muted: rgba(255, 140, 0, 0.7);
  --color-orange: #ff8c00;
  --color-orange-muted: rgba(255, 140, 0, 0.7);
  --color-orange-subtle: rgba(255, 140, 0, 0.1);
  --color-deep-orange: #e07800;
  --color-deep-orange-muted: rgba(224, 120, 0, 0.7);
  --color-deep-orange-subtle: rgba(224, 120, 0, 0.12);
  --color-brick: #0a1628;
  --color-brick-subtle: rgba(10, 22, 40, 0.15);
  --color-maroon: #0a1628;
  --color-maroon-muted: rgba(42, 80, 128, 0.8);
  --color-maroon-subtle: rgba(10, 22, 40, 0.12);
  --color-teal: #226365;
  --color-teal-light: #2d8285;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  --shadow-glow: 0 0 40px rgba(255, 140, 0, 0.4);
  --shadow-glow-sm: 0 0 20px rgba(255, 140, 0, 0.4);
}

[data-theme="fleet-blue"][data-mode="light"] {
  --color-void: #f8fafc;
  --color-void-rgb: 248, 250, 252;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-light: #cbd5e1;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;
  --color-accent: #ea7e00;
  --color-accent-light: #ff8c00;
  --color-accent-dark: #c96d00;
  --color-accent-glow: rgba(234, 126, 0, 0.2);
  --color-accent-subtle: rgba(234, 126, 0, 0.08);
  --color-accent-muted: rgba(234, 126, 0, 0.7);
  --color-orange: #ea7e00;
  --color-orange-muted: rgba(234, 126, 0, 0.7);
  --color-orange-subtle: rgba(234, 126, 0, 0.08);
  --color-deep-orange: #c96d00;
  --color-deep-orange-muted: rgba(201, 109, 0, 0.7);
  --color-deep-orange-subtle: rgba(201, 109, 0, 0.1);
  --color-brick: #1e3a5f;
  --color-brick-subtle: rgba(30, 58, 95, 0.1);
  --color-maroon: #1e3a5f;
  --color-maroon-muted: rgba(30, 58, 95, 0.6);
  --color-maroon-subtle: rgba(30, 58, 95, 0.08);
  --color-teal: #0d9488;
  --color-teal-light: #14b8a6;
  --color-teal-muted: rgba(13, 148, 136, 0.7);
  --color-teal-subtle: rgba(13, 148, 136, 0.1);
  --color-teal-glow: rgba(13, 148, 136, 0.3);
  --color-success: #059669;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(234, 126, 0, 0.2);
  --shadow-glow-sm: 0 0 20px rgba(234, 126, 0, 0.2);
}

/* ── Charcoal ── Warm neutral charcoal + blue accent. Professional/premium. */
[data-theme="charcoal"] {
  --color-void: #121214;
  --color-void-rgb: 18, 18, 20;
  --color-surface: #1c1c1f;
  --color-surface-raised: #28282c;
  --color-border: #35353a;
  --color-border-light: #48484f;
  --color-text-primary: #f0f0f2;
  --color-text-secondary: #a0a0a8;
  --color-text-muted: #686870;
  --color-accent: #3b82f6;
  --color-accent-light: #60a5fa;
  --color-accent-dark: #2563eb;
  --color-accent-glow: rgba(59, 130, 246, 0.4);
  --color-accent-subtle: rgba(59, 130, 246, 0.1);
  --color-accent-muted: rgba(59, 130, 246, 0.7);
  --color-orange: #3b82f6;
  --color-orange-muted: rgba(59, 130, 246, 0.7);
  --color-orange-subtle: rgba(59, 130, 246, 0.1);
  --color-deep-orange: #2563eb;
  --color-deep-orange-muted: rgba(37, 99, 235, 0.7);
  --color-deep-orange-subtle: rgba(37, 99, 235, 0.12);
  --color-brick: #121214;
  --color-brick-subtle: rgba(18, 18, 20, 0.15);
  --color-maroon: #121214;
  --color-maroon-muted: rgba(72, 72, 79, 0.8);
  --color-maroon-subtle: rgba(18, 18, 20, 0.12);
  --color-teal: #3b82f6;
  --color-teal-light: #60a5fa;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-info: #3b82f6;
  --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.4);
  --shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.4);
}

[data-theme="charcoal"][data-mode="light"] {
  --color-void: #fafafa;
  --color-void-rgb: 250, 250, 250;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f4f5;
  --color-border: #e4e4e7;
  --color-border-light: #d4d4d8;
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-muted: #a1a1aa;
  --color-accent: #2563eb;
  --color-accent-light: #3b82f6;
  --color-accent-dark: #1d4ed8;
  --color-accent-glow: rgba(37, 99, 235, 0.2);
  --color-accent-subtle: rgba(37, 99, 235, 0.08);
  --color-accent-muted: rgba(37, 99, 235, 0.7);
  --color-orange: #2563eb;
  --color-orange-muted: rgba(37, 99, 235, 0.7);
  --color-orange-subtle: rgba(37, 99, 235, 0.08);
  --color-deep-orange: #1d4ed8;
  --color-deep-orange-muted: rgba(29, 78, 216, 0.7);
  --color-deep-orange-subtle: rgba(29, 78, 216, 0.1);
  --color-brick: #1e1e22;
  --color-brick-subtle: rgba(30, 30, 34, 0.08);
  --color-maroon: #1e1e22;
  --color-maroon-muted: rgba(82, 82, 91, 0.6);
  --color-maroon-subtle: rgba(30, 30, 34, 0.06);
  --color-teal: #2563eb;
  --color-teal-light: #3b82f6;
  --color-teal-muted: rgba(37, 99, 235, 0.7);
  --color-teal-subtle: rgba(37, 99, 235, 0.1);
  --color-teal-glow: rgba(37, 99, 235, 0.3);
  --color-success: #059669;
  --color-danger: #dc2626;
  --color-info: #2563eb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.2);
  --shadow-glow-sm: 0 0 20px rgba(37, 99, 235, 0.2);
}