/* Cardi light view: html[data-theme="light"], set by assets/theme.js.
   Dark stays the default and lives in each page's own styles; this file only
   re-points their colour tokens, then patches the few surfaces that were
   written as fixed dark colours. Loaded last in <head> so it wins. */

html[data-theme="light"],
html[data-theme="light"] body.landing,
html[data-theme="light"] .section-dark {
  color-scheme: light;

  /* index.html */
  --night: #F6F8FA;
  --panel: #FFFFFF;
  --panel-2: #F0F3F7;
  --rule: #DCE2EA;
  --signal: #0AA597;
  --signal-dim: rgba(10,165,151,.12);
  --silver: #3D4757;
  --muted: #5B6779;

  /* style.css (design, tap-to-link) */
  --bg: #F6F8FA;
  --bg-alt: #FFFFFF;
  --bg-soft: #EEF2F6;
  --surface: #FFFFFF;
  --line: #DCE2EA;
  --line-soft: rgba(15,23,42,0.07);
  --text: #18202B;
  --text-mute: #5B6779;
  --text-soft: #8592A3;
  --text-invert: #04211E;
  --accent: #0AA597;
  --accent-2: #0BB5A5;
  --accent-soft: rgba(10,165,151,0.12);
  --accent-deep: #08887C;
  --accent-glow: rgba(10,165,151,0.22);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 12px 32px rgba(15,23,42,0.06);
  --shadow-lg: 0 18px 60px rgba(15,23,42,0.12);
  --shadow-card: 0 14px 50px rgba(15,23,42,0.16);

  /* account, contact, privacy, shipping, thank-you, track, reset */
  --ink: #18202B;
  --mute: #5B6779;
  --soft: #8592A3;
  --track: rgba(15,23,42,0.07);
  --on-accent: #FFFFFF;
}
html[data-theme="light"] body,
html[data-theme="light"] body.landing,
html[data-theme="light"] body.home,
html[data-theme="light"] body.home:is(.is-designing, .is-editing, .is-capturing) { background: var(--bg, #F6F8FA); }

/* ---------- the toggle ---------- */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 999px; border: 1px solid rgba(141,154,173,.35); background: transparent; color: inherit; cursor: pointer; opacity: .85; padding: 0; }
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .i-sun { display: none; }
html[data-theme="light"] .theme-toggle .i-sun { display: block; }
html[data-theme="light"] .theme-toggle .i-moon { display: none; }
.theme-toggle--float { position: fixed; z-index: 50; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 96px;
  width: 36px; height: 36px; background: rgba(33,41,54,.92); color: #E9EEF3; border-color: #324158; }
html[data-theme="light"] .theme-toggle--float,
html[data-theme="light"] .lang-switch--float { background: #FFFFFF; color: #18202B; border-color: #DCE2EA; }
html[data-theme="light"] .lang-switch--nav,
html[data-theme="light"] .theme-toggle { border-color: #CBD3DD; }
@media print { .theme-toggle { display: none; } }

/* ---------- dark islands ----------
   Phones, lock screens and metal cards are pictures of real objects: they stay
   dark in the light view, so they get the dark tokens back. */
html[data-theme="light"] :is(.phone, .lock, .alert, .demo .frame, .cardi, .wb-phone, .tapscreen, .t-phone, .phone-frame, .tapnote, .tapphone, .taptag, .t-cardstack__c, .wb-board__target) {
  color-scheme: dark;
  --night: #212936; --panel: #263143; --panel-2: #29364C; --rule: #324158; --signal: #0DC5B4;
  --silver: #B9C1CC; --text: #E9EEF3; --muted: #8D9AAD;
  --bg: #212936; --bg-alt: #263143; --bg-soft: #29364C; --surface: #263143; --line: #324158;
  --line-soft: rgba(255,255,255,0.06); --text-mute: #8D9AAD; --text-soft: #61708A; --accent: #0DC5B4;
  --ink: #E9EEF3; --mute: #8D9AAD; --soft: #61708A;
  color: var(--text);
}

/* ---------- index.html ---------- */
html[data-theme="light"] .nav > :is(.wrap, .nav-inner),
html[data-theme="light"] .nav.is-scrolled > :is(.wrap, .nav-inner),
html[data-theme="light"] .editor-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,250,252,.88));
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: 0 20px 44px -22px rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .tilt.tilt-live.is-hover { box-shadow: 0 26px 50px -24px rgba(15,23,42,.25); }
html[data-theme="light"] .mq { background: linear-gradient(90deg, rgba(10,165,151,.07), rgba(10,165,151,0) 30%, rgba(10,165,151,0) 70%, rgba(10,165,151,.07)); }
html[data-theme="light"] .nav-acct__btn:hover,
html[data-theme="light"] .nav-acct.is-open .nav-acct__btn { border-color: #B8C2CE; }
html[data-theme="light"] .step { background: linear-gradient(180deg, rgba(10,165,151,.07), rgba(246,248,250,0)); }
html[data-theme="light"] footer { background: #EEF2F6; }
html[data-theme="light"] .urlbar { border-color: #CBD3DD; }
html[data-theme="light"] .demo .frame { box-shadow: 0 30px 70px rgba(15,23,42,.18); }
html[data-theme="light"] :is(.site .bar, .dash .chrome) .mono { background: #EEF2F6; }
html[data-theme="light"] :is(.site .bar, .dash .chrome) i { background: #CBD3DD; }
html[data-theme="light"] .site .body .l { background: #E3E9F0; }
html[data-theme="light"] .site .body .l.h { background: #CFD8E3; }
html[data-theme="light"] .bars div,
html[data-theme="light"] .legend span::before { background: #C9D3DF; }
html[data-theme="light"] .auth-field input { background: #F0F3F7 !important; }

/* ---------- style.css pages (design, tap-to-link) ---------- */
html[data-theme="light"] .logo-word,
html[data-theme="light"] .footer-logo :is(.logo-word, .logo-mark),
html[data-theme="light"] body.landing .footer :is(.logo-word, .logo-mark) { color: var(--text); }
html[data-theme="light"] :is(.nav-links a, .nav-link--page) { color: #3D4757; }
html[data-theme="light"] :is(.nav-links a, .nav-link--page):hover { color: var(--text); }
html[data-theme="light"] .nav-links a.nav-cta,
html[data-theme="light"] .nav-cta { color: var(--text-invert); }
html[data-theme="light"] .nav-acct__chev { color: var(--text-mute); }
html[data-theme="light"] :is(footer, .footer, .footer.has-fx, body.landing .footer) {
  background: #EEF2F6 !important; border-top-color: var(--line) !important; color: var(--text-mute);
}
html[data-theme="light"] :is(.footer-brand p, .footer-copy, .footer-links a, .footer-social__link, .footer-text-mute, .footer-bottom) { color: var(--text-mute); }
html[data-theme="light"] :is(.footer-links a, .footer-social__link):hover { color: var(--text); }
html[data-theme="light"] .hbanner {
  --text: #18202B; --text-mute: #5B6779; --text-soft: #8592A3; --line: #DCE2EA; --surface: #FFFFFF;
  background: radial-gradient(70% 90% at 75% 30%, rgba(10,165,151,0.10), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #F1F4F8 100%);
  border-color: #DCE2EA;
  box-shadow: 0 30px 80px rgba(15,23,42,0.10);
}
html[data-theme="light"] :is(.footer-links-heading, .footer-col h4, .footer h4) { color: var(--text); }
html[data-theme="light"] .nav nav a, html[data-theme="light"] .nav .nav-links .nav-link--page { color: #4A5566; }
html[data-theme="light"] .nav nav a:hover, html[data-theme="light"] .nav .nav-links .nav-link--page:hover { color: var(--text); }