/* Theme A (Trusted Teal): Ordexly default look. Dark mode via html[data-theme="dark"]. */

/* ---------- Theme A: Trusted Teal ---------- */
html:root {
  --primary:#0f4c5c; --accent:#0b6b77; --accent-light:#d3ede8; --light:#f2f8f9;
  --text:#12313a; --muted:#46636c; --success:#0b6b77; --border:#d3e5e8; --bg:#ffffff;
  --sk-header:#0f4c5c; --sk-hero1:#0f4c5c; --sk-hero2:#1a6378; --sk-hero-text:#ffffff;
  --sk-cta-bg:#b4432f; --sk-cta-fg:#ffffff; --sk-banner-bg:#fff1ec; --sk-banner-fg:#8a2f1f; --sk-link:#0b6b77;
  --sk-radius:16px; --sk-pad:5rem;
}
html:root[data-theme="dark"] {
  --primary:#bfe6ea; --accent:#5cc8d1; --accent-light:#133038; --light:#16303a;
  --text:#e3f1f3; --muted:#a3c0c6; --success:#5cc8d1; --border:#2b4a54; --bg:#0d1d22;
  --sk-header:#0a171b; --sk-hero1:#0d1d22; --sk-hero2:#16303a; --sk-hero-text:#ffffff;
  --sk-cta-bg:#f49a83; --sk-cta-fg:#2a0f08; --sk-banner-bg:#16303a; --sk-banner-fg:#f8c4b6; --sk-link:#7fd6dd;
}

/* ---------- Shared skin rules ---------- */
html:root body { background:var(--bg); color:var(--text); }
html:root header, html:root footer { background:var(--sk-header); }
html:root .hero { background:linear-gradient(135deg, var(--sk-hero1) 0%, var(--sk-hero2) 100%); color:var(--sk-hero-text); padding-top:calc(var(--sk-pad) + 1rem); padding-bottom:var(--sk-pad); }
html:root section { padding-top:var(--sk-pad); padding-bottom:var(--sk-pad); }
html:root .beta-banner { background:var(--sk-banner-bg); color:var(--sk-banner-fg); border-color:var(--border); }
html:root .beta-banner a { color:var(--sk-banner-fg); }
html:root .card, html:root .price-card { background:var(--light); border-color:var(--border); border-radius:var(--sk-radius); }
html:root main a:not(.cta):not(.btn) { color:var(--sk-link); }
html:root .hero a:not(.cta) { color:var(--sk-hero-text); }
html:root .cta, html:root .nav-cta, html:root .btn, html:root button.primary { background:var(--sk-cta-bg); color:var(--sk-cta-fg); border-color:var(--sk-cta-bg); border-radius:var(--sk-radius); }
html:root .cta.secondary { background:transparent; color:var(--sk-hero-text); border-color:var(--sk-hero-text); }
html:root main input, html:root main select { border-radius:calc(var(--sk-radius) / 1.6); }
html:root .cta, html:root .nav-cta { border-radius:999px; }
html:root .grid { gap:2rem; }


/* Override hardcoded base colors (some base rules use !important or dark-mode specificity) */
html:root header nav a:not(.nav-cta) { color:#ffffff; }
html:root header .nav-cta, html:root[data-theme="dark"] header .nav-cta { background:var(--sk-cta-bg) !important; color:var(--sk-cta-fg) !important; }
html:root header .nav-cta:hover { background:var(--sk-cta-bg) !important; filter:brightness(1.08); }
html:root main .hero a:not(.cta):not(.btn) { color:var(--sk-hero-text); }
html:root[data-theme="dark"] .card, html:root[data-theme="dark"] .price-card,
html:root[data-theme="dark"] .disclaimer, html:root[data-theme="dark"] .callout,
html:root[data-theme="dark"] .subscribe-btns a { background:var(--light); border-color:var(--border); }
html:root[data-theme="dark"] section:not(.hero) .cta:not(.secondary-dark),
html:root[data-theme="dark"] a.cta:not(.secondary):not(.secondary-dark) { background-color:var(--sk-cta-bg); color:var(--sk-cta-fg); }
html:root .copy-btn { background:var(--sk-cta-bg); color:var(--sk-cta-fg); }

/* ---------- Header: medium-mint surface; Ask Ordexly and badges on theme ---------- */
html:root {
  --hd-bg:#a9dcd3; --hd-fg:#0b3a46; --hd-border:#7fc2b7; --hd-shadow:0 2px 10px rgba(15,76,92,.16);
  --fab-bg:#0b6b77; --fab-fg:#ffffff;
  --bd-deep-bg:#0b6b77; --bd-deep-fg:#ffffff; --bd-off-bg:#0f4c5c; --bd-off-fg:#ffffff; --bd-ann-bg:#8a2f1f; --bd-ann-fg:#ffffff;
}
html:root[data-theme="dark"] {
  --hd-bg:#16303a; --hd-fg:#e3f1f3; --hd-border:#2f5560; --hd-shadow:0 2px 10px rgba(0,0,0,.45);
  --fab-bg:#5cc8d1; --fab-fg:#0a171b;
  --bd-deep-bg:#5cc8d1; --bd-deep-fg:#0a171b; --bd-off-bg:#bfe6ea; --bd-off-fg:#0a171b; --bd-ann-bg:#f8c4b6; --bd-ann-fg:#2a0f08;
}

html:root body > header, html:root[data-theme="dark"] body > header {
  background:var(--hd-bg); color:var(--hd-fg); border-bottom:1px solid var(--hd-border); box-shadow:var(--hd-shadow); }
html:root body > header .logo, html:root body > header .logo a,
html:root body > header nav a:not(.nav-cta), html:root body > header .hamburger { color:var(--hd-fg); }
html:root body > header nav a.active { border-bottom-color:var(--hd-fg); }
html:root body > header .hamburger span { background:var(--hd-fg); }

/* Ask Ordexly button + panel submit on theme */
html:root #askFab { background:var(--fab-bg); color:var(--fab-fg); }
html:root #askFab .fab-icon { background:rgba(255,255,255,.22); }
html:root[data-theme="dark"] #askFab .fab-icon { background:rgba(10,23,27,.15); }
html:root #askForm button { background:var(--fab-bg); color:var(--fab-fg); }

/* Badges on theme */
html:root .tag.badge-deep, html:root .badge-deep { background:var(--bd-deep-bg); color:var(--bd-deep-fg); border-color:var(--bd-deep-bg); }
html:root .tag.badge-official, html:root .badge-official { background:var(--bd-off-bg); color:var(--bd-off-fg); border-color:var(--bd-off-bg); }
html:root .tag.badge-annual, html:root .badge-annual { background:var(--bd-ann-bg); color:var(--bd-ann-fg); border-color:var(--bd-ann-bg); }
html:root .pill { background:var(--accent-light); color:var(--text); }
html:root .tag { color:var(--text); }
html:root body > header .hamburger { color:var(--hd-fg) !important; border-color:var(--hd-border) !important; }
html:root body > header .theme-toggle { color:var(--hd-fg) !important; border-color:var(--hd-fg) !important; }
html:root body > header .theme-toggle:hover { background:rgba(127,127,127,.15) !important; }