/* Semantic theme layer for the public website and customer workspace. */
:root {
    color-scheme: light;
    --theme-page: #f5f7fa;
    --theme-surface: #ffffff;
    --theme-surface-raised: #ffffff;
    --theme-text: #172b46;
    --theme-muted: #52657d;
    --theme-meta: #5d6d82;
    --theme-border: #e1e8f0;
    --theme-separator: #e8edf3;
    --theme-hover: #f0f5fb;
    --theme-input: #ffffff;
    --theme-primary: #246fc8;
    --theme-primary-hover: #1d5fae;
    --theme-primary-soft: #edf5ff;
    --theme-success: #176c5a;
    --theme-success-soft: #eaf5f1;
    --theme-warning: #805b17;
    --theme-warning-soft: #fbf3df;
    --theme-error: #a33c3c;
    --theme-error-soft: #fff8f8;
    --theme-info-soft: #f1f6fc;
    --theme-chart: #286da8;
    --theme-track: #e4ebf3;
    --theme-shadow: 0 10px 30px rgba(24, 43, 66, .08);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --theme-page: #111b29;
    --theme-surface: #192638;
    --theme-surface-raised: #202f42;
    --theme-text: #edf3fa;
    --theme-muted: #c1cede;
    --theme-meta: #b3c1d2;
    --theme-border: #3a4b60;
    --theme-separator: #334459;
    --theme-hover: #25364b;
    --theme-input: #142235;
    --theme-primary: #8fc2ff;
    --theme-primary-hover: #add2ff;
    --theme-primary-soft: #263c55;
    --theme-success: #83ddbf;
    --theme-success-soft: #1c3b38;
    --theme-warning: #f1ce83;
    --theme-warning-soft: #403720;
    --theme-error: #ffaaa3;
    --theme-error-soft: #412b31;
    --theme-info-soft: #20364d;
    --theme-chart: #8fc2ff;
    --theme-track: #334459;
    --theme-shadow: 0 16px 36px rgba(0, 0, 0, .24);
    --bg: var(--theme-page);
    --surface: var(--theme-surface);
    --surface-solid: var(--theme-surface-raised);
    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --border: var(--theme-border);
    --primary: #74adf0;
    --secondary: #60c6a8;
    --gradient: linear-gradient(120deg, #3d78b6, #338b80);
    --soft-gradient: radial-gradient(ellipse at 12% 0%, rgba(69, 122, 180, .12), transparent 32%), #111b29;
    --shadow: var(--theme-shadow);
}

html[data-theme="dark"] body {
    color: var(--theme-text);
    background: var(--soft-gradient);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .plan .price,
html[data-theme="dark"] .stat strong,
html[data-theme="dark"] .dashboard-qr-copy strong,
html[data-theme="dark"] .dashboard-ranking-row b,
html[data-theme="dark"] .qr-card h2 a,
html[data-theme="dark"] .phone-value,
html[data-theme="dark"] .preview-topbar strong,
html[data-theme="dark"] .preview-title strong,
html[data-theme="dark"] .insight-preview-head strong {
    color: var(--theme-text);
}

html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
html[data-theme="dark"] dt,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .stat small,
html[data-theme="dark"] .data-row small,
html[data-theme="dark"] .dashboard-qr-copy small,
html[data-theme="dark"] .dashboard-qr-meta small,
html[data-theme="dark"] .dashboard-ranking-row small,
html[data-theme="dark"] .chart-row time,
html[data-theme="dark"] .chart-row strong,
html[data-theme="dark"] .data-range-label,
html[data-theme="dark"] .hero-note,
html[data-theme="dark"] .preview-topbar small,
html[data-theme="dark"] .preview-title small,
html[data-theme="dark"] .preview-module small,
html[data-theme="dark"] .insight-preview small,
html[data-theme="dark"] .preview-footnote,
html[data-theme="dark"] .marketing-cta p,
html[data-theme="dark"] .faq-list details p,
html[data-theme="dark"] .analytics-zero-state p {
    color: var(--theme-muted);
}

html[data-theme="dark"] a:not(.button),
html[data-theme="dark"] .stat-link,
html[data-theme="dark"] .section-row > a,
html[data-theme="dark"] .compact-empty > a:not(.button) {
    color: #a9cefa;
}

html[data-theme="dark"] .site-header {
    background: rgba(17, 27, 41, .96);
    border-color: var(--theme-border);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
}

html[data-theme="dark"] .site-nav-desktop a,
html[data-theme="dark"] .customer-nav a {
    color: var(--theme-muted);
}

html[data-theme="dark"] .site-nav-desktop a:hover,
html[data-theme="dark"] .site-nav-desktop a[aria-current],
html[data-theme="dark"] .customer-nav a:hover,
html[data-theme="dark"] .customer-nav a.active {
    color: var(--theme-text);
}

html[data-theme="dark"] .site-nav-desktop a[aria-current]::after,
html[data-theme="dark"] .customer-nav a.active::before {
    background: var(--theme-primary);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .plan,
html[data-theme="dark"] .plan.featured,
html[data-theme="dark"] .customer-nav,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .qr-card,
html[data-theme="dark"] .analytics-panel,
html[data-theme="dark"] .analytics-zero-state,
html[data-theme="dark"] .scan-empty-panel,
html[data-theme="dark"] .insight-preview,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .marketing-cta,
html[data-theme="dark"] .workspace-preview {
    color: var(--theme-text);
    background: var(--theme-surface);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .marketing-cta {
    background: radial-gradient(ellipse at 90% 5%, rgba(75, 150, 145, .1), transparent 38%), var(--theme-surface);
}

html[data-theme="dark"] .hero-art {
    border-color: var(--theme-border);
    background: radial-gradient(circle at 25% 18%, rgba(74, 131, 192, .18), transparent 46%), radial-gradient(circle at 82% 86%, rgba(57, 143, 125, .14), transparent 43%), var(--theme-surface);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .button,
html[data-theme="dark"] .mobile-menu summary,
html[data-theme="dark"] .theme-toggle {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background: var(--theme-surface-raised);
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .mobile-menu nav a:hover,
html[data-theme="dark"] .mobile-menu nav a[aria-current],
html[data-theme="dark"] .mobile-menu nav button:hover,
html[data-theme="dark"] .customer-nav a.active,
html[data-theme="dark"] .customer-nav a:hover,
html[data-theme="dark"] a.data-row:hover {
    color: var(--theme-text);
    background: var(--theme-hover);
}

html[data-theme="dark"] .button.primary {
    color: #ffffff;
    border-color: transparent;
    background: #346fae;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .button.primary:hover {
    background: #3e7fbe;
}

html[data-theme="dark"] .button.danger {
    color: var(--theme-error);
}

html[data-theme="dark"] .mobile-menu nav {
    border-color: var(--theme-border);
    background: var(--theme-surface-raised);
    box-shadow: var(--theme-shadow);
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .filter-bar input,
html[data-theme="dark"] .filter-bar select,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background-color: var(--theme-input);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a4b3c6;
    opacity: 1;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    border-color: #8fc2ff;
    box-shadow: 0 0 0 3px rgba(143, 194, 255, .2);
}

html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: #76b3f3;
}

html[data-theme="dark"] option {
    color: var(--theme-text);
    background: var(--theme-input);
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .notice.info {
    color: var(--theme-text);
    border-color: #3b5876;
    border-left-color: #85b9f1;
    background: var(--theme-info-soft);
}

html[data-theme="dark"] .notice.warning {
    color: #f5dfad;
    border-color: #625235;
    border-left-color: #dcb764;
    background: var(--theme-warning-soft);
}

html[data-theme="dark"] .notice.error {
    color: #ffd2cc;
    border-color: #644147;
    border-left-color: #f08f87;
    background: var(--theme-error-soft);
}

html[data-theme="dark"] .status-badge {
    color: var(--theme-success);
    background: var(--theme-success-soft);
}

html[data-theme="dark"] .status-badge.status-scheduled {
    color: #b8d8ff;
    background: #263d59;
}

html[data-theme="dark"] .status-badge.status-ended {
    color: #c3cedb;
    background: #354254;
}

html[data-theme="dark"] .status-badge.status-warning {
    color: var(--theme-warning);
    background: var(--theme-warning-soft);
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table-scroll {
    color: var(--theme-text);
    border-color: var(--theme-border);
    background: var(--theme-surface);
}

html[data-theme="dark"] th {
    color: var(--theme-muted);
    border-color: var(--theme-border);
    background: var(--theme-surface-raised);
}

html[data-theme="dark"] td {
    color: var(--theme-text);
    border-color: var(--theme-separator);
}

html[data-theme="dark"] tr:hover td {
    background: var(--theme-hover);
}

html[data-theme="dark"] .data-row,
html[data-theme="dark"] .dashboard-qr-row,
html[data-theme="dark"] .qr-card-footer,
html[data-theme="dark"] .choice-row,
html[data-theme="dark"] .preview-topbar,
html[data-theme="dark"] .preview-module,
html[data-theme="dark"] .insight-list > div {
    border-color: var(--theme-separator);
}

html[data-theme="dark"] .dashboard-qr-row:hover {
    background: var(--theme-hover);
}

html[data-theme="dark"] .quota-track,
html[data-theme="dark"] .chart-track {
    background: #34465c;
}

html[data-theme="dark"] .quota-track > span,
html[data-theme="dark"] .chart-track span {
    background: linear-gradient(90deg, #70a9e7, #58bba2);
}

html[data-theme="dark"] .qr-preview-link,
html[data-theme="dark"] .qr-detail-preview img,
html[data-theme="dark"] .qr-card img,
html[data-theme="dark"] .dashboard-qr-row > img,
html[data-theme="dark"] .mini-qr-placeholder {
    border-color: var(--theme-border);
    background: #ffffff;
}

html[data-theme="dark"] .qr-preview-link img,
html[data-theme="dark"] .qr-detail-preview img,
html[data-theme="dark"] .qr-card img,
html[data-theme="dark"] .dashboard-qr-row > img {
    filter: none;
}

html[data-theme="dark"] .qr-unavailable {
    color: var(--theme-muted);
    background: var(--theme-surface-raised);
}

html[data-theme="dark"] .qr-destination strong,
html[data-theme="dark"] .qr-card-footer > span:first-child strong,
html[data-theme="dark"] .dashboard-qr-meta,
html[data-theme="dark"] .dashboard-ranking-row b,
html[data-theme="dark"] .chart-row strong {
    color: var(--theme-text);
}

html[data-theme="dark"] .preview-module strong,
html[data-theme="dark"] .insight-list strong,
html[data-theme="dark"] .faq-list summary,
html[data-theme="dark"] .dashboard-ranking-row strong {
    color: var(--theme-text);
}

html[data-theme="dark"] .preview-module,
html[data-theme="dark"] .insight-list > div {
    background: var(--theme-surface-raised);
}

html[data-theme="dark"] .preview-pill {
    color: #9be2cc;
    background: #24443f;
}

html[data-theme="dark"] .preview-icon,
html[data-theme="dark"] .insight-symbol,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .empty-icon {
    color: #b6d6fb;
    background: #293d55;
}

html[data-theme="dark"] .scan-icon,
html[data-theme="dark"] .empty-icon-scan {
    color: #9be2cc;
    background: #24443f;
}

html[data-theme="dark"] .plan-icon {
    color: #d2c0ef;
    background: #3d3450;
}

html[data-theme="dark"] .profile-placeholder {
    color: #c5ddfb;
    border-color: var(--theme-border);
    background: linear-gradient(135deg, #293d55, #24443f);
}

html[data-theme="dark"] .plan .badge {
    color: #c7def9;
    background: #293d55;
}

html[data-theme="dark"] .plan .features li {
    color: var(--theme-muted);
}

html[data-theme="dark"] .site-footer {
    color: var(--theme-muted);
    border-color: var(--theme-border);
    background: #151f2d;
}

html[data-theme="dark"] ::selection {
    color: #f4f8fd;
    background: rgba(104, 164, 225, .38);
}

html[data-theme="dark"] :focus-visible {
    outline-color: #a8d1ff;
    outline-offset: 3px;
}

html[data-theme="dark"] :disabled,
html[data-theme="dark"] [aria-disabled="true"] {
    color: #9baabd;
    opacity: .72;
}

.theme-toggle {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    color: var(--theme-text);
    background: var(--theme-surface);
    cursor: pointer;
}

.theme-toggle:hover { background: var(--theme-hover); }
.theme-toggle svg { display: block; }
.theme-toggle svg[hidden] { display: none; }
.mobile-menu nav .mobile-theme-toggle { display: inline-grid; width: 46px; justify-self: end; margin: 6px 8px; padding: 0; text-align: center; }
.settings-theme-toggle { margin-block: 8px 16px; }
.fallback-theme .theme-toggle { width: 46px; height: 46px; }
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.theme-setting-status {
    color: var(--muted);
    font-size: .82rem;
}

@media (max-width: 1100px) { .desktop-theme-toggle { display: none; } }
@media (min-width: 1101px) { .mobile-theme-toggle { display: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}