/* FieldOps cyan palette — dark default, light via html[data-theme="light"] */
:root,
html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1416;
    --surface: #1e293b;
    --surface2: #252b2d;
    --text: #dee3e6;
    --muted: #9aa5a9;
    --outline: #8a9296;
    --accent: #88d1ec;
    --accent-rgb: 136, 209, 236;
    --accent-dim: #0891b2;
    --accent-container: #004e61;
    --on-primary: #003543;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --radius: 12px;
    --font: 'DM Sans', system-ui, sans-serif;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --input-border: #cbd5e1;
    --input-placeholder: #64748b;
    --sidebar-bg: #1b2023;
    --wordmark-filter: brightness(0) invert(1);
    --panel-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    --dropdown-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    --table-row-hover: rgba(255, 255, 255, 0.02);
    --menu-hover: rgba(255, 255, 255, 0.04);
    --nav-accent-bg: rgba(var(--accent-rgb), 0.08);
    --hero-glow: rgba(var(--accent-rgb), 0.14);
    --hero-band-bg: linear-gradient(180deg, rgba(26, 35, 50, 0.85) 0%, rgba(15, 20, 25, 0.4) 100%);
    --hero-band-border: rgba(36, 48, 68, 0.8);
    --hero-ghost-btn-bg: rgba(26, 35, 50, 0.6);
    --hero-stat-divider: rgba(255, 255, 255, 0.06);
    --hero-stage-bg:
        radial-gradient(ellipse 70% 55% at 72% 42%, rgba(var(--accent-rgb), 0.14), transparent 55%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(8, 145, 178, 0.1), transparent 50%),
        linear-gradient(165deg, rgba(10, 14, 18, 0.95), rgba(15, 20, 25, 0.88));
    --hero-stage-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface2: #e2e8f0;
    --text: #0f172a;
    --muted: #64748b;
    --outline: #94a3b8;
    --accent: #0891b2;
    --accent-rgb: 8, 145, 178;
    --accent-dim: #0e7490;
    --accent-container: #cffafe;
    --on-primary: #ffffff;
    --success: #059669;
    --warning: #d97706;
    --danger: #dc2626;
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --input-border: #cbd5e1;
    --input-placeholder: #94a3b8;
    --sidebar-bg: #ffffff;
    --wordmark-filter: none;
    --panel-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
    --dropdown-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    --table-row-hover: rgba(15, 23, 42, 0.03);
    --menu-hover: rgba(15, 23, 42, 0.04);
    --nav-accent-bg: rgba(var(--accent-rgb), 0.1);
    --hero-glow: rgba(var(--accent-rgb), 0.12);
    --hero-band-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    --hero-band-border: #e2e8f0;
    --hero-ghost-btn-bg: #ffffff;
    --hero-stat-divider: #e2e8f0;
    --hero-stage-bg:
        radial-gradient(ellipse 70% 55% at 72% 42%, rgba(var(--accent-rgb), 0.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 20% 70%, rgba(8, 145, 178, 0.08), transparent 50%),
        linear-gradient(165deg, #ffffff, #e2e8f0);
    --hero-stage-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04) inset;
}

html[data-theme="light"] .badge-in_progress { color: #2563eb; }
html[data-theme="light"] .badge-expired { color: #64748b; }

/* Phone story + landing sections inherit global tokens in light mode */
html[data-theme="light"] .phone-story,
html[data-theme="light"] .phone-story-features,
html[data-theme="light"] .phone-story-proof {
    --ps-bg: var(--bg);
    --ps-panel: var(--surface);
    --ps-panel-deep: var(--surface2);
    --ps-text: var(--text);
    --ps-muted: var(--muted);
    --ps-accent: var(--accent);
    --ps-accent-deep: var(--accent-dim);
}

html[data-theme="light"] .phone-story__stage::before {
    background: linear-gradient(
        180deg,
        var(--ps-bg) 0%,
        rgba(241, 245, 249, 0.92) 35%,
        transparent 100%
    );
}

html[data-theme="light"] .phone-story__hero h1 {
    text-shadow: none;
}

html[data-theme="light"] .phone-story__hero p {
    text-shadow: none;
}

html[data-theme="light"] .phone-story__stat,
html[data-theme="light"] .phone-story__mini-card {
    background: var(--surface);
    border-color: var(--surface2);
}

html[data-theme="light"] .phone-story-feature {
    border-color: var(--surface2);
}

html[data-theme="light"] .phone-story-proof {
    background: linear-gradient(180deg, var(--surface2) 0%, var(--bg) 100%);
}

.topbar-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}