/* Website appearance is separate from a member's card/signature design. */
:root {
  color-scheme: light;
  --site-bg: #ffffff;
  --site-panel: #ffffff;
  --site-raised: #f4f6f6;
  --site-text: #142030;
  --site-muted: #63707b;
  --site-border: #d5dde0;
  --site-primary: #426f73;
  --site-on-primary: #ffffff;
  --site-error: #a1262f;
  --site-success: #346b5c;
}
:root[data-site-theme="dark"] {
  color-scheme: dark;
  --site-bg: #0d151f;
  --site-panel: #15212d;
  --site-raised: #1d2b37;
  --site-text: #edf3f6;
  --site-muted: #a7b7c4;
  --site-border: #435768;
  --site-primary: #a1d1cd;
  --site-on-primary: #10252c;
  --site-error: #ffaca8;
  --site-success: #a3d5bc;
  --ink: var(--site-text);
  --muted: var(--site-muted);
  --accent: var(--site-primary);
  --line: #344554;
  --paper: var(--site-raised);
}

/* Shared TapFlow wordmark and NFC symbol, including the standalone studios. */
.brand { display: inline-flex; align-items: center; }
.brand > .brand-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; margin: 0 9px 0 0; padding: 0 4px 0 0;
  border-radius: 9px; background: var(--site-text); color: var(--site-bg);
  font-size: 19px; line-height: 1; letter-spacing: -2px; transform: rotate(-12deg);
}
.brand > .brand-dot { font-size: 10px; align-self: flex-start; margin: 2px 0 0 3px; }

/* A consistent, keyboard-accessible control with a generous touch target. */
header.has-site-theme { gap: 16px; }
header.has-site-theme > .brand { margin-right: auto; flex-shrink: 0; }
.site-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; padding: 10px; margin: 0;
  flex-shrink: 0; border: 1px solid var(--site-border); border-radius: 50%;
  background: var(--site-panel); color: var(--site-text); cursor: pointer;
  touch-action: manipulation;
}
.site-theme-toggle:hover { background: var(--site-raised); border-color: var(--site-primary); }
.site-theme-toggle:focus-visible { outline: 3px solid var(--site-primary); outline-offset: 3px; }
.site-theme-toggle svg { width: 22px; height: 22px; flex: none; }
.site-theme-toggle .site-theme-sun { display: none; }
[data-site-theme="dark"] .site-theme-toggle .site-theme-sun { display: block; }
[data-site-theme="dark"] .site-theme-toggle .site-theme-moon { display: none; }
.site-theme-floating { position: fixed; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); z-index: 20; }
.gate-body { padding-top: 84px; }
@media (max-width: 850px) {
  header.has-site-theme nav { top: 100%; }
}
@media (max-width: 620px) {
  header.has-site-theme { height: auto; min-height: 78px; padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  header.has-site-theme > .brand { font-size: 23px; }
  header.has-site-theme > a:not(.brand) { font-size: 12px; max-width: 120px; text-align: right; }
  header.has-site-theme > .member-nav { order: 3; width: 100%; justify-content: flex-end; }
  header.has-site-theme .member-nav .login { margin-top: 0; }
  header.has-site-theme .mobile-toggle { font-size: 13px; padding: 8px 10px; }
  .studio-header.has-site-theme .header-right { margin-left: auto; }
  .studio-header.has-site-theme .private-label { font-size: 11px; padding: 4px 7px; }
}

/* Shared pages, panels and navigation. Photos retain their original colors. */
[data-site-theme="dark"] body { background: var(--site-bg); color: var(--site-text); }
[data-site-theme="dark"] header.has-site-theme { background: #0d151ff2; border-color: var(--line); }
[data-site-theme="dark"] :is(.dashboard-panel, .editor-form, .price-card, .order-panel, .export-panel, .gate-card) {
  background: var(--site-panel); border-color: var(--line);
}
[data-site-theme="dark"] :is(.secondary, .login, .mobile-toggle, .chart-views button, .chart-link-filter button) {
  background: var(--site-panel); color: var(--site-text); border-color: var(--site-border);
}
[data-site-theme="dark"] :is(.secondary, .login, .mobile-toggle):hover { background: var(--site-raised); }
[data-site-theme="dark"] :is(.primary, .light, .popular-badge) {
  background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary);
}
[data-site-theme="dark"] :is(.primary, .light):hover { background: #b9dfdc; color: var(--site-on-primary); }
[data-site-theme="dark"] :is(.chart-views button[aria-pressed="true"], .chart-link-filter button[aria-pressed="true"], .member-view-tabs a[aria-current="page"]) {
  background: var(--site-primary); color: var(--site-on-primary); border-color: var(--site-primary);
}
[data-site-theme="dark"] :is(.price-card.popular, .get-started, .order-account, .selected-member) {
  background: var(--site-raised); border-color: var(--site-border);
}
[data-site-theme="dark"] :is(.pill, .member-badge, .editor-title .editor-owner, .feature-icon, .caption-icon) {
  background: #223c43; color: var(--site-primary); border-color: var(--site-border);
}
[data-site-theme="dark"] :is(.visual-caption, .image-label) {
  background: #15212ded; color: var(--site-text); border-color: var(--site-border);
}
[data-site-theme="dark"] .hero-visual { background: var(--site-raised); }
[data-site-theme="dark"] .brand-icon { background: var(--site-primary); color: var(--site-on-primary); }
[data-site-theme="dark"] :is(.menu-note, .trust-strip, .section-meta) { border-color: var(--line); }
[data-site-theme="dark"] .trust-strip { color: var(--site-text); }
[data-site-theme="dark"] .trust-strip i { background: var(--site-border); }
[data-site-theme="dark"] :is(.hero-promise, .trust-strip > span, .section-meta, .price-label, .price span, .price-card small, .signup-steps, footer) { color: var(--site-muted); }
[data-site-theme="dark"] :is(footer p, footer > span, .local-note, .close, summary > span) { color: var(--site-muted); }
[data-site-theme="dark"] :is(.outline-icon, .note-bottom) { color: var(--site-primary); }
[data-site-theme="dark"] .eyebrow { color: var(--site-primary); }
[data-site-theme="dark"] .current-step { color: var(--site-primary); }
[data-site-theme="dark"] :is(.photo-remove, .editor-share a) { color: var(--site-primary); }
[data-site-theme="dark"] .order-lines .order-saving :is(dt, dd) { color: var(--site-success); }
[data-site-theme="dark"] .subscriber-overview .canceled { background: #e4a07e; }
@media (max-width: 850px) {
  [data-site-theme="dark"] header.has-site-theme nav { background: var(--site-panel); border-bottom: 1px solid var(--line); }
}

/* Inputs and modal confirmations, including member/admin editing tools. */
[data-site-theme="dark"] :is(.dashboard, .signup-form-panel, .editor-form, dialog) :is(input, textarea, select),
[data-site-theme="dark"] :is(.field input:not([type="range"]), .field select, .color-field input, .upload-control) {
  background: var(--site-bg); color: var(--site-text); border-color: var(--site-border);
}
[data-site-theme="dark"] :is(.dashboard, .signup-form-panel, .editor-form, dialog, .field) :is(input, textarea)::placeholder {
  color: var(--site-muted); opacity: 1;
}
[data-site-theme="dark"] :is(input[type="checkbox"], input[type="range"]) { accent-color: var(--site-primary); }
[data-site-theme="dark"] :is(button, a, input, textarea, select, summary):focus-visible {
  outline-color: var(--site-primary);
}
[data-site-theme="dark"] :is(dialog, #delete-dialog) { background: var(--site-panel); color: var(--site-text); border-color: var(--site-border); }
[data-site-theme="dark"] dialog::backdrop { background: #02070bcc; }
[data-site-theme="dark"] :is(.dashboard .error, .editor-status.error, .checkout-status, .order-status[data-error="true"], #subscription-dialog .status.error, .status.error, .save-bar p.error) { color: var(--site-error); }
[data-site-theme="dark"] .button.danger { background: #a1262f; color: #fff; border-color: #d56870; }

/* Private signature studio: theme the editor, not the designed email. */
[data-site-theme="dark"] :is(.page-heading p, legend span, legend small, .upload-control label span, .upload-control input, .theme-toggle small, .preview-caption, .export-panel > p, .export-panel .asset-note, .install-help p, .studio-footer, .gate-card p, .header-right, .save-bar p) { color: var(--site-muted); }
[data-site-theme="dark"] :is(.text-button, .save-bar > a, .install-help summary, .private-label, .export-panel .status:not(.error)) { color: var(--site-primary); }
[data-site-theme="dark"] :is(.private-label, .install-help, .workspace fieldset) { border-color: var(--line); }
[data-site-theme="dark"] .header-rule { background: var(--line); }
[data-site-theme="dark"] .theme-toggle { background: var(--site-panel); border-color: var(--site-border); }
[data-site-theme="dark"] .switch-track { background: var(--site-border); }
[data-site-theme="dark"] .theme-toggle input:checked + .switch-track { background: #426f73; }
[data-site-theme="dark"] .upload-control input::file-selector-button { background: var(--site-raised); color: var(--site-primary); }
[data-site-theme="dark"] .workspace .subtle { color: var(--site-muted) !important; }

/* Keep the card and signature previews independent from the website toggle. */
.business-card {
  --ink: var(--card-ink); --muted: var(--card-muted); --accent: var(--card-accent);
  --line: var(--card-line); --paper: var(--card-bg);
}
[data-site-theme="dark"] .business-card :is(a, button, summary):focus-visible { outline-color: var(--card-accent); }
.mail-window { color: #15212d; color-scheme: light; }
#signature-preview, #manual-signature { color-scheme: light; }