/* ==========================================================================
   AdHops 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.
   ========================================================================== */

/* Default palette (light) — matches current site appearance */
:root {
  --color-primary: #667eea;
  --color-primary-dark: #4c5ec7;
  --color-accent: #764ba2;
  --color-accent-light: #a78bfa;
  --color-gradient-deep: #3a1d72;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-text-light: #475569;
  --color-dim: #64748b;
  --color-border: #e2e8f0;
  --color-gradient-start: #667eea;
  --color-gradient-end: #764ba2;
  --color-nav-bg: #1e1b4b;
  --color-footer-bg: #0f172a;
  --color-shadow: rgba(102,126,234,0.10);

  /* Status / notice colors */
  --color-notice-warn-bg: #fef3c7;
  --color-notice-warn-text: #92400e;
  --color-notice-warn-border: #fcd34d;
  --color-notice-error-bg: #fee2e2;
  --color-notice-error-text: #991b1b;
  --color-notice-error-border: #fca5a5;
}

/* Default dark */
html.dark {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #e2e8f0;
  --color-text-light: #94a3b8;
  --color-dim: #64748b;
  --color-border: #334155;
  --color-shadow: rgba(0,0,0,0.3);
}

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

html.palette-ocean {
  --color-primary: #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-accent: #06b6d4;
  --color-gradient-start: #0ea5e9;
  --color-gradient-end: #06b6d4;
  --color-gradient-deep: #064e6e;
  --color-nav-bg: #0c4a6e;
}

html.palette-ocean.dark {
  --color-bg: #082f49;
  --color-surface: #0c4a6e;
  --color-text: #e0f2fe;
  --color-text-light: #7dd3fc;
  --color-border: #0369a1;
}

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

html.palette-sunset {
  --color-primary: #f97316;
  --color-primary-dark: #ea580c;
  --color-accent: #ef4444;
  --color-gradient-start: #f97316;
  --color-gradient-end: #ef4444;
  --color-gradient-deep: #7c1d1d;
  --color-nav-bg: #7c2d12;
}

html.palette-sunset.dark {
  --color-bg: #1c1917;
  --color-surface: #292524;
  --color-text: #fef3c7;
  --color-text-light: #fdba74;
  --color-border: #78350f;
}

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

html.palette-forest {
  --color-primary: #16a34a;
  --color-primary-dark: #15803d;
  --color-accent: #84cc16;
  --color-gradient-start: #16a34a;
  --color-gradient-end: #84cc16;
  --color-gradient-deep: #052e16;
  --color-nav-bg: #14532d;
}

html.palette-forest.dark {
  --color-bg: #052e16;
  --color-surface: #14532d;
  --color-text: #dcfce7;
  --color-text-light: #86efac;
  --color-border: #166534;
}