/* --------------------------------------------------
   THEME VARIABLES
   -------------------------------------------------- */

:root {
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #1f2937 0%, #020617 52%, #000 100%);
  --page-text: #f9fafb;

  --light-bg: #f3f4f6;          /* slate-100 */
  --light-text: #020617;        /* slate-950 */

  --footer-light-bg: #f9fafb;   /* slate-50 */
  --footer-light-border: #e5e7eb;
  --footer-light-text: #4b5563; /* slate-600 */

  --brand: #ef4444;
}

/* Apply dynamic background + text */
html.theme-dark {
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #1f2937 0%, #020617 52%, #000 100%);
  --page-text: #f9fafb;
}

html.theme-light {
  --page-bg: var(--light-bg);
  --page-text: var(--light-text);
}

body {
  background: var(--page-bg);
  color: var(--page-text);
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Smooth transitions */
header.header-shell,
footer.footer-shell {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}


/* --------------------------------------------------
   HEADER + NAVIGATION
   -------------------------------------------------- */

/* Dark */
html.theme-dark header.header-shell {
  background-color: rgba(15,23,42,0.9);
  border-bottom-color: rgba(30,41,59,0.8);
}

/* Light */
html.theme-light header.header-shell {
  background-color: rgba(255,255,255,0.9);
  border-bottom-color: rgba(148,163,184,0.6);
}

/* Logo – readable in light mode */
html.theme-light header.header-shell .text-slate-50 {
  color: #0f172a;
}

html.theme-light header.header-shell .text-slate-400 {
  color: #6b7280;
}

/* Nav pills */
html.theme-light header.header-shell nav a {
  background-color: rgba(15,23,42,0.03);
  color: #4b5563;
}

html.theme-light header.header-shell nav a:hover {
  background-color: #e5e7eb;
}

/* Active pill */
html.theme-light header.header-shell nav a.bg-brandSoft {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Add button already fine */


/* --------------------------------------------------
   THEME TOGGLE
   -------------------------------------------------- */

html.theme-light #themeToggle {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html.theme-light #themeToggle:hover {
  background-color: #e5e7eb;
}


/* --------------------------------------------------
   LOGIN BUTTON (white)
   -------------------------------------------------- */

html.theme-light header.header-shell button.bg-white {
  border: 1px solid rgba(148,163,184,0.8);
  box-shadow: 0 1px 2px rgba(15,23,42,0.12);
}

html.theme-light header.header-shell button.bg-white:hover {
  background-color: #e5e7eb;
}


/* --------------------------------------------------
   FOOTER
   -------------------------------------------------- */

html.theme-light footer.footer-shell {
  background-color: var(--footer-light-bg);
  border-top-color: var(--footer-light-border);
  color: var(--footer-light-text);
}

/* Readable logo text */
html.theme-light footer.footer-shell .text-slate-100 {
  color: #0f172a;
}

/* Nav links */
html.theme-light footer.footer-shell nav a {
  color: #4b5563;
}
html.theme-light footer.footer-shell nav a:hover {
  color: #111827;
}


/* --------------------------------------------------
   STATIC PAGES (LEGAL / PRIVACY / CONTACT / ABOUT)
   -------------------------------------------------- */

html.theme-light article.legal {
  background: #fff;
  color: #111827;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

html.theme-light article.legal h1,
html.theme-light article.legal h2,
html.theme-light article.legal h3 {
  color: #111827;
}

html.theme-light article.legal p,
html.theme-light article.legal li {
  color: #374151;
}

html.theme-light article.legal .text-slate-400,
html.theme-light article.legal .text-slate-500,
html.theme-light article.legal .text-slate-600 {
  color: #4b5563;
}

html.theme-light article.legal a {
  color: var(--brand);
}
html.theme-light article.legal a:hover {
  color: #b91c1c;
}


/* --------------------------------------------------
   SHARED UTILITY: THIN SCROLLBAR
   -------------------------------------------------- */

.scrollbar-thin {
  scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
  height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  border-radius: 999px;
}