/* ==========================================================================
   Hoppy Palette System
   CSS custom properties for global theming.
   Named palettes override :root defaults via html.palette-{name}.
   Dark mode overrides via html.dark or html.palette-{name}.dark.

   Extracted from: adh.css, style.css, hero-slider.css, index.html,
   broadcasterview.js, drivers.html, contact.html inline styles.
   ========================================================================== */

/* Default palette (light) */
:root {
  /* ── Primary brand colors ── */
  --color-primary: #667eea;
  --color-primary-dark: #4c5ec7;
  --color-primary-deeper: #4f46e5;
  --color-primary-deepest: #4338ca;
  --color-accent: #764ba2;
  --color-accent-light: #a78bfa;
  --color-accent-soft: #c4b5fd;

  /* ── Gradients ── */
  --color-gradient-start: #667eea;
  --color-gradient-end: #764ba2;
  --color-gradient-deep: #3a1d72;

  /* ── Backgrounds ── */
  --color-bg: #f8fafc;
  --color-bg-alt: #f5f5f5;
  --color-surface: #ffffff;

  /* ── Text ── */
  --color-text: #1e293b;
  --color-text-light: #475569;
  --color-text-mid: #333333;
  --color-dim: #64748b;
  --color-muted: #6b7280;
  --color-subtle: #9ca3af;
  --color-faint: #999999;

  /* ── Borders ── */
  --color-border: #e2e8f0;
  --color-border-light: #e5e7eb;
  --color-border-mid: #dddddd;

  /* ── Navigation ── */
  --color-nav-bg: #1e1b4b;
  --color-nav-text: rgba(255, 255, 255, 0.7);
  --color-nav-text-hover: #ffffff;
  --color-nav-hover-bg: rgba(255, 255, 255, 0.1);
  --color-nav-active-bg: rgba(255, 255, 255, 0.15);
  --color-nav-divider: rgba(255, 255, 255, 0.1);
  --color-nav-label: rgba(255, 255, 255, 0.4);

  /* ── Footer ── */
  --color-footer-bg: #0f172a;
  --color-footer-text: rgba(255, 255, 255, 0.7);
  --color-footer-link: rgba(255, 255, 255, 0.6);
  --color-footer-link-hover: #ffffff;

  /* ── Shadows ── */
  --color-shadow: rgba(102, 126, 234, 0.10);
  --color-shadow-dark: rgba(0, 0, 0, 0.3);
  --color-shadow-nav: rgba(0, 0, 0, 0.15);
  --color-shadow-dropdown: rgba(0, 0, 0, 0.3);
  --color-shadow-heavy: rgba(0, 0, 0, 0.2);

  /* ── Buttons ── */
  --color-btn-bg: rgba(255, 255, 255, 0.15);
  --color-btn-bg-hover: rgba(255, 255, 255, 0.25);
  --color-btn-border: rgba(255, 255, 255, 0.25);

  /* ── Status / Success ── */
  --color-success: #16a34a;
  --color-success-light: #10b981;
  --color-success-vivid: #38a169;

  /* ── Status / Error & Danger ── */
  --color-error: #e53e3e;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-danger-active: #b91c1c;
  --color-danger-disabled: #fca5a5;
  --color-error-bg: #fee2e2;
  --color-error-bg-light: #fef2f2;

  /* ── Status / Warning ── */
  --color-notice-warn-bg: #fef3c7;
  --color-notice-warn-text: #92400e;
  --color-notice-warn-border: #fcd34d;
  --color-warning-bg: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-warning-text: #856404;

  /* ── Status / Error notices ── */
  --color-notice-error-bg: #fee2e2;
  --color-notice-error-text: #991b1b;
  --color-notice-error-border: #fca5a5;

  /* ── Hero slider ── */
  --color-hero-bg-start: #1a2a4a;
  --color-hero-bg-end: #05070a;
  --color-hero-accent: #00d2ff;
  --color-hero-text: #ffffff;
  --color-hero-text-soft: rgba(255, 255, 255, 0.9);
  --color-hero-dot: rgba(255, 255, 255, 0.2);
  --color-hero-dot-active: #00d2ff;
  --color-hero-glass-bg: rgba(255, 255, 255, 0.05);
  --color-hero-glass-border: #00d2ff;

  /* ── Cards ── */
  --color-card-icon-1: #6c5ce7;
  --color-card-icon-2: #0984e3;
  --color-card-icon-3: #00b894;
  --color-card-icon-4: #e17055;
  --color-card-icon-5: #fdcb6e;
  --color-card-icon-6: #a29bfe;

  /* ── Popover / Overlay ── */
  --color-overlay-bg: rgba(0, 0, 0, 0.7);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.75);
  --color-popover-bg: #000000;
  --color-popover-border: #333333;

  /* ── Earnings calculator (drivers page) ── */
  --color-calc-label: rgba(10, 20, 40, 0.95);
  --color-calc-fineprint: #666666;

  /* ── Mobile menu ── */
  --color-mobile-menu-bg: rgba(255, 255, 255, 0.97);

  /* ── Transaction colors (wallet) ── */
  --color-credit: #16a34a;
  --color-debit: #dc2626;
}

/* Default dark */
html.dark {
  --color-bg: #0f172a;
  --color-bg-alt: #1a2332;
  --color-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-text-light: #94a3b8;
  --color-text-mid: #cbd5e1;
  --color-dim: #64748b;
  --color-muted: #6b7280;
  --color-subtle: #4b5563;
  --color-faint: #6b7280;
  --color-border: #334155;
  --color-border-light: #374151;
  --color-border-mid: #475569;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  --color-mobile-menu-bg: rgba(15, 23, 42, 0.97);
  --color-overlay-bg: rgba(0, 0, 0, 0.85);
  --color-calc-label: rgba(226, 232, 240, 0.95);
  --color-calc-fineprint: #94a3b8;
}

/* ---------- Ocean palette ---------- */

html.palette-ocean {
  --color-primary: #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-primary-deeper: #0369a1;
  --color-primary-deepest: #075985;
  --color-accent: #06b6d4;
  --color-accent-light: #67e8f9;
  --color-accent-soft: #a5f3fc;
  --color-gradient-start: #0ea5e9;
  --color-gradient-end: #06b6d4;
  --color-gradient-deep: #064e6e;
  --color-nav-bg: #0c4a6e;
  --color-footer-bg: #082f49;
  --color-hero-bg-start: #0c4a6e;
  --color-hero-bg-end: #082f49;
  --color-hero-accent: #22d3ee;
  --color-hero-dot-active: #22d3ee;
  --color-hero-glass-border: #22d3ee;
  --color-shadow: rgba(14, 165, 233, 0.10);
  --color-card-icon-1: #0ea5e9;
  --color-card-icon-2: #06b6d4;
  --color-card-icon-3: #14b8a6;
  --color-card-icon-4: #0891b2;
  --color-card-icon-5: #38bdf8;
  --color-card-icon-6: #67e8f9;
}

html.palette-ocean.dark {
  --color-bg: #082f49;
  --color-bg-alt: #0a3d5c;
  --color-surface: #0c4a6e;
  --color-text: #e0f2fe;
  --color-text-light: #7dd3fc;
  --color-text-mid: #bae6fd;
  --color-border: #0369a1;
  --color-border-light: #0284c7;
  --color-shadow: rgba(14, 165, 233, 0.15);
}

/* ---------- Sunset palette ---------- */

html.palette-sunset {
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-primary-deeper: #c2410c;
  --color-primary-deepest: #9a3412;
  --color-accent: #ef4444;
  --color-accent-light: #fb923c;
  --color-accent-soft: #fed7aa;
  --color-gradient-start: #f97316;
  --color-gradient-end: #ef4444;
  --color-gradient-deep: #7c1d1d;
  --color-nav-bg: #7c2d12;
  --color-footer-bg: #1c1917;
  --color-hero-bg-start: #7c2d12;
  --color-hero-bg-end: #1c1917;
  --color-hero-accent: #fb923c;
  --color-hero-dot-active: #fb923c;
  --color-hero-glass-border: #fb923c;
  --color-shadow: rgba(249, 115, 22, 0.10);
  --color-card-icon-1: #f97316;
  --color-card-icon-2: #ef4444;
  --color-card-icon-3: #f59e0b;
  --color-card-icon-4: #dc2626;
  --color-card-icon-5: #fbbf24;
  --color-card-icon-6: #fb923c;
}

html.palette-sunset.dark {
  --color-bg: #1c1917;
  --color-bg-alt: #292524;
  --color-surface: #292524;
  --color-text: #fef3c7;
  --color-text-light: #fdba74;
  --color-text-mid: #fed7aa;
  --color-border: #78350f;
  --color-border-light: #92400e;
  --color-shadow: rgba(249, 115, 22, 0.15);
}

/* ---------- Forest palette ---------- */

html.palette-forest {
  --color-primary: #16a34a;
  --color-primary-dark: #15803d;
  --color-primary-deeper: #166534;
  --color-primary-deepest: #14532d;
  --color-accent: #84cc16;
  --color-accent-light: #a3e635;
  --color-accent-soft: #d9f99d;
  --color-gradient-start: #16a34a;
  --color-gradient-end: #84cc16;
  --color-gradient-deep: #052e16;
  --color-nav-bg: #14532d;
  --color-footer-bg: #052e16;
  --color-hero-bg-start: #14532d;
  --color-hero-bg-end: #052e16;
  --color-hero-accent: #4ade80;
  --color-hero-dot-active: #4ade80;
  --color-hero-glass-border: #4ade80;
  --color-shadow: rgba(22, 163, 74, 0.10);
  --color-card-icon-1: #16a34a;
  --color-card-icon-2: #84cc16;
  --color-card-icon-3: #22c55e;
  --color-card-icon-4: #65a30d;
  --color-card-icon-5: #a3e635;
  --color-card-icon-6: #4ade80;
}

html.palette-forest.dark {
  --color-bg: #052e16;
  --color-bg-alt: #0a3d1f;
  --color-surface: #14532d;
  --color-text: #dcfce7;
  --color-text-light: #86efac;
  --color-text-mid: #bbf7d0;
  --color-border: #166534;
  --color-border-light: #15803d;
  --color-shadow: rgba(22, 163, 74, 0.15);
}