/*
 * PanelCore — Light theme for a.gopanelcore.online
 * Activated by the `light` class on <html> (set in layout head script).
 * Inert on the main dark domain.
 */
html.light {
  /* ─── Background Colors (white + light grey) ─── */
  --black-pure: #ffffff;
  --black-soft: #fafafa;
  --black-matte: #ffffff;
  --surface-1: #f6f6f6;
  --surface-2: #efefef;
  --surface-3: #e6e6e6;
  --surface-4: #dadada;
  --surface-5: #cfcfcf;

  /* ─── Border/Stroke Colors ─── */
  --stroke-subtle: rgba(0,0,0,0.07);
  --stroke-soft: rgba(0,0,0,0.11);
  --stroke-medium: rgba(0,0,0,0.16);
  --stroke-strong: rgba(0,0,0,0.24);

  /* ─── Text Hierarchy ─── */
  --text-primary: #0a0a0a;
  --text-secondary: rgba(0,0,0,0.85);
  --text-muted: rgba(0,0,0,0.62);
  --text-dim: rgba(0,0,0,0.42);
  --text-ghost: rgba(0,0,0,0.28);

  /* ─── Inset/Glow Effects ─── */
  --inset-light: inset 0 1px 0 rgba(255,255,255,0.9);
  --inset-dark: inset 0 -1px 0 rgba(0,0,0,0.06);
  --glow-soft: 0 0 40px rgba(0,0,0,0.03);
  --glow-medium: 0 0 60px rgba(0,0,0,0.05);

  /* ─── Shadows ─── */
  --shadow-sm: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-md: 0 12px 40px rgba(0,0,0,0.10);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.12);
  --shadow-xl: 0 40px 100px rgba(0,0,0,0.16);

  /* ─── Focus Ring ─── */
  --ring: rgba(0,0,0,0.4);
}

/* Patches for colors site.css hardcodes outside the token block */
html.light .btn-outline:hover {
  background: rgba(0,0,0,0.04);
}

html.light .site-nav[data-scrolled="true"] {
  background: rgba(255,255,255,0.88);
}

html.light .hero {
  background:
    radial-gradient(ellipse 120% 80% at 10% 20%, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.015) 40%, transparent 70%),
    radial-gradient(ellipse 100% 70% at 90% 80%, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.008) 35%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0,0,0,0.006) 0%, transparent 60%),
    var(--black-pure);
}

html.light .ambient-glow-1 {
  background: radial-gradient(ellipse, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 40%, transparent 70%);
}

html.light .ambient-glow-2 {
  background: radial-gradient(ellipse, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.03) 40%, transparent 70%);
}

html.light .mockup-badge {
  background: rgba(0,0,0,0.07);
}

html.light .sticky-bar {
  background: rgba(255,255,255,0.94);
}

html.light .back-to-top {
  background: rgba(0,0,0,0.05);
}

html.light .back-to-top:hover {
  background: rgba(0,0,0,0.09);
  border-color: rgba(0,0,0,0.18);
}

/* Icons are fetched as white monochrome; particles are drawn white on canvas */
html.light img[src*="simpleicons.org"] {
  filter: invert(1);
}

html.light .hero-particles {
  filter: invert(1);
}

/* ─── Teal CTAs (light host only) ─── */
html.light {
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --ring: rgba(13,148,136,0.5);
}

html.light .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

html.light .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #ffffff;
}

/* Quiz registration button is inline-styled green in the component; override on the light host */
html.light .quiz-cta {
  background: var(--accent) !important;
  box-shadow: 0 10px 30px rgba(13,148,136,0.35) !important;
}

html.light .quiz-cta:hover:not(:disabled) {
  background: var(--accent-hover) !important;
}

/* Quiz eyebrow is inline neon-green with a glow; unreadable on white */
html.light .quiz-eyebrow {
  color: var(--accent) !important;
  text-shadow: none !important;
}