/*
 * New look for the public pages: the landing, the shared header and footer, and
 * the log-in, sign-up and contact pages. Same palette as the app pages
 * (app-landing-theme.css): near-black, one mint-to-cyan accent.
 *
 * Scoped under html.ct-theme-landing (set by _theme_switch.html only for visitors
 * who opted in with ?theme=landing), so it does nothing for everyone else.
 * Learn's own accents are not recoloured yet.
 */
html.ct-theme-landing {
  --lt-bg: #07070C;
  --lt-panel: #0A0A12;
  --lt-raised: #101018;
  --lt-line: rgba(255, 255, 255, .06);
  --lt-line-2: rgba(255, 255, 255, .10);
  --lt-text: #F2F2F5;
  --lt-text-2: #9A9AA6;
  --lt-muted: #7C7C8A;
  --lt-cyan: #32E5FF;
  --lt-green: #3DDC97;
  --lt-accent: linear-gradient(135deg, #3DDC97, #32E5FF);
  --lt-accent-hover: linear-gradient(135deg, #5BE8AC, #5CEBFF);
  --lt-on-accent: #07070C;
  --lt-tint: rgba(50, 229, 255, .08);
  --lt-tint-line: rgba(50, 229, 255, .3);
  --lt-glow: rgba(50, 229, 255, .10);
}

/* ---------- Shared header and footer ---------- */
html.ct-theme-landing .ct-header { background: rgba(7, 7, 12, .82); border-bottom-color: var(--lt-line); }
html.ct-theme-landing .ct-nav a:hover { color: var(--lt-cyan); }
html.ct-theme-landing .ct-nav a.ct-nav-learn::after { background: var(--lt-accent); }
html.ct-theme-landing .ct-free { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing .ct-btn,
html.ct-theme-landing .ct-nav a.ct-btn { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing .ct-btn:hover,
html.ct-theme-landing .ct-nav a.ct-btn:hover { background: var(--lt-accent-hover); color: var(--lt-on-accent); }
html.ct-theme-landing .ct-free.ct-free-btn { background: var(--lt-on-accent); color: var(--lt-green); }
html.ct-theme-landing .ct-logout-btn:hover { border-color: var(--lt-cyan); color: var(--lt-cyan); }
html.ct-theme-landing .ct-footer { background: var(--lt-bg); border-top-color: var(--lt-line); color: var(--lt-muted); }
html.ct-theme-landing .ct-footer a:hover { color: var(--lt-cyan); }
html.ct-theme-landing :focus-visible { outline-color: var(--lt-cyan); }

/* ---------- Landing ---------- */
html.ct-theme-landing body.ld-page {
  --bg: var(--lt-bg);
  --surface: var(--lt-raised);
  --surface-alt: var(--lt-panel);
  --primary: #32E5FF;
  --primary-hover: #5CEBFF;
  --accent: var(--lt-cyan);
  --green: var(--lt-green);
  background: var(--lt-bg);
}
html.ct-theme-landing body.ld-page .ld-hero {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--lt-glow), transparent);
}
html.ct-theme-landing body.ld-page .ld-final {
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--lt-glow), transparent);
}
html.ct-theme-landing body.ld-page .ld-hero-badge { color: var(--lt-green); border-color: rgba(61, 220, 151, .35); }
html.ct-theme-landing body.ld-page .ld-btn { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing body.ld-page .ld-btn:hover { background: var(--lt-accent-hover); color: var(--lt-on-accent); }
html.ct-theme-landing body.ld-page .ld-btn-ghost { background: transparent; color: var(--lt-text); }
html.ct-theme-landing body.ld-page .ld-btn-ghost:hover { color: var(--lt-cyan); }
html.ct-theme-landing body.ld-page .ld-free { background: var(--lt-on-accent); color: var(--lt-green); }
html.ct-theme-landing body.ld-page .ld-quiz {
  background: linear-gradient(135deg, rgba(61, 220, 151, .10), rgba(50, 229, 255, .06));
  border-color: var(--lt-tint-line);
}
html.ct-theme-landing body.ld-page .ld-quiz:hover { border-color: rgba(61, 220, 151, .6); }
html.ct-theme-landing body.ld-page .ld-quiz-icon { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing body.ld-page .ld-quiz-kicker { color: var(--lt-green); }
html.ct-theme-landing body.ld-page .ld-quiz-btn { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing body.ld-page .ld-card { border-color: var(--lt-line); }
html.ct-theme-landing body.ld-page .ld-pillars a.ld-card:hover { border-color: var(--lt-tint-line); }
html.ct-theme-landing body.ld-page .ld-tag { background: var(--lt-tint); }
html.ct-theme-landing body.ld-page .ld-tag-dim { background: rgba(255, 255, 255, .08); }
html.ct-theme-landing body.ld-page .ld-rr { background: var(--lt-tint); border-color: var(--lt-tint-line); }

/* ---------- Log in, sign up, contact ---------- */
html.ct-theme-landing body.auth-page,
html.ct-theme-landing body.contact-page {
  background: radial-gradient(ellipse 60% 45% at 50% 0%, var(--lt-glow), transparent), var(--lt-bg);
}
html.ct-theme-landing .auth-card a,
html.ct-theme-landing .contact-trust-text a { color: var(--lt-cyan); }
html.ct-theme-landing .auth-btn-primary { background: var(--lt-accent); color: var(--lt-on-accent); }
html.ct-theme-landing .auth-btn-primary:hover { background: var(--lt-accent-hover); }
html.ct-theme-landing .auth-input,
html.ct-theme-landing .auth-code-input,
html.ct-theme-landing .contact-page input,
html.ct-theme-landing .contact-page textarea { background: var(--lt-bg); }
html.ct-theme-landing .auth-input:focus,
html.ct-theme-landing .auth-code-input:focus,
html.ct-theme-landing .contact-page input:focus,
html.ct-theme-landing .contact-page textarea:focus { border-color: var(--lt-cyan); }
html.ct-theme-landing .auth-terms input[type="checkbox"] { accent-color: var(--lt-green); }
html.ct-theme-landing .auth-foot button { color: var(--lt-cyan); }
html.ct-theme-landing .contact-chip.is-selected { border-color: var(--lt-cyan); background: var(--lt-tint); color: var(--lt-text); }
html.ct-theme-landing .contact-page svg[stroke="#8B7CFF"] { stroke: var(--lt-cyan); }