/* SubscribeGuard – Dual Theme (Dark + Light) • WCAG AA
   v6: add base :root light defaults so pages never render black if theme attr is missing
*/

html { color-scheme: light dark; }

/* ---------- BASE LIGHT DEFAULTS (always present) ---------- */
:root{
  /* Light palette fallback so the UI is readable even if data-theme isn’t set yet */
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --text:#0F172A; --text-2:#334155; --muted:#64748B;
  --link:#2563EB; --link-hover:#1D4ED8; --border:#E2E8F0;

  /* Brand + layout tokens (header can override these) */
  --brand:#2563EB;
  --primary:#166534; --primary-2:#047857;

  --radius:12px;
  --container-max:1100px;
  --fs-scale:0.95;

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem;
  --space-4:1rem; --space-6:1.5rem; --space-8:2rem;

  --font-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  /* Buttons (usable without theme attr) */
  --btn-bg:#E5E7EB; --btn-bg-h:#CBD5E1; --btn-text:#0F172A;

  /* Shadow baseline */
  --shadow:0 10px 24px rgba(2,6,23,.08);
}

/* ---------- DARK / LIGHT OVERRIDES WHEN data-theme IS SET ---------- */
html[data-theme="dark"] {
  --bg:#0B0F19; --surface:#0F172A; --surface-2:#111827;
  --text:#F8FAFC; --text-2:#CBD5E1; --muted:#94A3B8;
  --link:#93C5FD; --link-hover:#BFDBFE; --border:#1F2937;
  --brand: var(--brand); /* header style tag can override value */
  --primary:#166534; --primary-2:#047857;
  --btn-bg:#1F2937; --btn-bg-h:#374151; --btn-text:#E5E7EB;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
html[data-theme="light"] {
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --text:#0F172A; --text-2:#334155; --muted:#64748B;
  --link:#2563EB; --link-hover:#1D4ED8; --border:#E2E8F0;
  --brand: var(--brand);
  --primary:#166534; --primary-2:#047857;
  --btn-bg:#E5E7EB; --btn-bg-h:#CBD5E1; --btn-text:#0F172A;
  --shadow:0 10px 24px rgba(2,6,23,.08);
}

/* ---------- Base / Typography ---------- */
*,*::before,*::after { box-sizing: border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body);
  font-size: calc( clamp(15px, 1.0vw + 11px, 17px) * var(--fs-scale) );
  line-height:1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4{ line-height:1.22; margin:var(--space-6) 0 var(--space-3); color:var(--text); letter-spacing:-.01em; }
h1{ font-size: calc( clamp(1.9rem, 1.0rem + 2.2vw, 2.6rem) * var(--fs-scale) ); font-weight:800; }
h2{ font-size: calc( clamp(1.4rem, .8rem + 1.3vw, 1.9rem) * var(--fs-scale) ); font-weight:700; }
h3{ font-size: calc( clamp(1.15rem, .7rem + .9vw, 1.35rem) * var(--fs-scale) ); font-weight:700; }
p, ul, ol{ margin:0 0 var(--space-4); color:var(--text-2); }
ul, ol{ padding-left:1.2rem; } li{ margin:.3rem 0; } li::marker{ color:var(--text-2); }
a{ color:var(--link); text-decoration:none; }
a:hover, a:focus{ color:var(--link-hover); text-decoration:underline; }

/* ---------- Layout ---------- */
.container, .prose{ max-width:var(--container-max); margin:0 auto; padding:0 var(--space-4); }

/* ---------- Header ---------- */
header, .navbar{
  background: rgba(15,23,42,.86);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar a{ color: var(--text-2); padding:.75rem .75rem; border-radius:8px; }
.navbar a:hover, .navbar a[aria-current="page"]{ color:var(--text); background: rgba(255,255,255,.03); }

/* ---------- Cards / Hero ---------- */
main, article, section, .content, .hero, .panel, .box, .card { opacity:1 !important; }
.hero, .card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
  box-shadow: var(--shadow);
  color: var(--text);
}
.card{ padding: var(--space-6); }
.hero p, .card p, .hero li, .card li { color: var(--text-2) !important; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:8px; font-weight:600;
  border:1px solid transparent; cursor:pointer;
  transition: transform .02s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  text-decoration:none;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background:var(--primary); color:#fff; border-color: rgba(255,255,255,.06); }
.btn-primary:hover{ background:var(--primary-2); }
.btn-primary:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.btn-secondary{ background:var(--btn-bg); color:var(--btn-text); border-color: rgba(255,255,255,.08); }
.btn-secondary:hover{ background:var(--btn-bg-h); }
.btn-ghost{ background:transparent; color:var(--link); }
.btn-ghost:hover{ color:var(--link-hover); background: rgba(255,255,255,.03); }

/* ---------- Pricing ---------- */
.pricing-wrap{ max-width: 900px; margin: 0 auto; }
.tiers{ display:grid; gap:var(--space-4); }
@media (min-width:760px){ .tiers{ grid-template-columns: 1fr; } }
.tier{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-6); box-shadow:var(--shadow); }
.tier .price{ font-weight:700; color:var(--text); margin-top:var(--space-3); }
.tier--pro{ border-color: rgba(96,165,250,.6); box-shadow:0 12px 40px rgba(96,165,250,.15); }
.tier--pro .badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; background: rgba(96,165,250,.15); }

/* ---------- Forms ---------- */
input,select,textarea{ background: rgba(255,255,255,.03); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.65rem .8rem; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- Footer ---------- */
footer{ color:var(--muted); border-top:1px solid var(--border); padding:var(--space-6) 0; }

/* ---------- A11y ---------- */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.visually-hidden{ position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* ---------- Widget area ---------- */
.widget-area{ margin-top: var(--space-8); margin-bottom: var(--space-6); }
.widgets-grid{ display:grid; gap:var(--space-4); grid-template-columns: 1fr; }
@media (min-width:700px){ .widgets-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .widgets-grid{ grid-template-columns: repeat(3,1fr); } }
.widget .widget-title{ margin:0 0 .5rem; color:var(--text); }
.widget .widget-list{ list-style: disc; padding-left:1.2rem; margin:0; }
.widget .widget-list a{ color:var(--link); }
.widget .widget-list a:hover{ color:var(--link-hover); }
.widget-cta .widget-text{ color:var(--text-2); margin-bottom:.75rem; }