/* ============================================================================
   Daybreak — Voxel City light theme
   ----------------------------------------------------------------------------
   A pearlescent, glassmorphic light mode for Habitat and Atlas. Activates when
   `documentElement[data-theme="light"]` is set (see ui/theme-toggle.js and the
   inline pre-paint script in index.html / atlas-shell.html).

   Three signature moves:
     1. Pearlescent dawn canvas — peach/mint/lavender mesh over ivory.
     2. Iridescent frosted glass — translucent white panels with inner highlight.
     3. Floating aurora bokeh — daybreakDrift + auroraPulse replace the starfield.
   ============================================================================ */

:root[data-theme="light"] {
    color-scheme: light;

    /* === Surfaces === */
    --bg-deep: #f4f0fb;
    --bg-panel: rgba(255, 255, 255, 0.78);
    --bg-elevated: rgba(255, 255, 255, 0.86);
    --bg-glass: rgba(255, 255, 255, 0.55);
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-card-hover: rgba(255, 255, 255, 0.92);

    /* === Hairlines === */
    --line: rgba(15, 23, 42, 0.06);
    --line-strong: rgba(15, 23, 42, 0.12);
    --line-accent: rgba(11, 182, 160, 0.42);

    /* === Text — WCAG AA against the pearl background === */
    --text: #11182b;
    --text-secondary: #3b4763;
    --muted: #6b7794;

    /* === Accents — re-tuned for contrast on light surfaces === */
    --accent: #5b6ee8;
    --accent-2: #0bb6a0;
    --accent-3: #d97636;
    --accent-warm: #e94f93;
    --primary-cta-text: #fffaf5;
    --danger: #d0353f;
    --success: #0f9c5a;

    /* === Primary CTA gradient stops (warm rose stays — it's the brand) === */
    --primary-cta-start: #db2777;
    --primary-cta-end: #f472b6;

    /* === Ghost / danger button surfaces === */
    --ghost-background: rgba(255, 255, 255, 0.7);
    --danger-button: #c92e2e;

    /* === Shadows — cool periwinkle drop shadow, never black === */
    --shadow-sm: 0 4px 18px rgba(70, 80, 130, 0.08);
    --shadow-md: 0 10px 32px rgba(70, 80, 130, 0.12);
    --shadow-lg: 0 24px 60px rgba(70, 80, 130, 0.18);
    --shadow-glow: 0 0 40px rgba(11, 182, 160, 0.18);
    --shadow-glow-warm: 0 0 30px rgba(233, 79, 147, 0.22);

    /* === Atlas-specific viewport plate === */
    --viewport-bg: #efebf8;
}

/* ============================================================================
   Body — Daybreak mesh canvas
   ============================================================================ */

[data-theme="light"] body {
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 80% 60% at 8% 0%, rgba(255, 196, 168, 0.55), transparent 60%),
        radial-gradient(ellipse 70% 60% at 100% 18%, rgba(173, 192, 255, 0.5), transparent 60%),
        radial-gradient(ellipse 90% 70% at 12% 100%, rgba(173, 235, 217, 0.55), transparent 65%),
        radial-gradient(ellipse 60% 50% at 92% 92%, rgba(232, 198, 255, 0.5), transparent 65%),
        linear-gradient(180deg, #fbf6ff 0%, #f0ecfa 100%);
}

/* Subtle film grain so the mesh never looks like a flat banded gradient. */
[data-theme="light"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.20  0 0 0 0 0.32  0 0 0 0.5 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ============================================================================
   Habitat shell — replace starfield + nebula with daybreak bokeh + aurora
   ============================================================================ */

[data-theme="light"] .habitat-app::before {
    background-image:
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.6px),
        radial-gradient(circle at 31% 81%, rgba(255, 220, 200, 0.85) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 54% 16%, rgba(220, 232, 255, 0.95) 0 1.6px, transparent 2.8px),
        radial-gradient(circle at 79% 62%, rgba(232, 220, 255, 0.85) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 91% 24%, rgba(255, 255, 255, 0.95) 0 1.6px, transparent 2.6px);
    background-size: 360px 360px, 460px 460px, 400px 400px, 540px 540px, 480px 480px;
    opacity: 0.55;
    animation: daybreakDrift 180s linear infinite;
    mix-blend-mode: normal;
}

[data-theme="light"] .habitat-app::after {
    background:
        radial-gradient(ellipse 44% 30% at 18% 70%, rgba(255, 178, 130, 0.34) 0%, transparent 72%),
        radial-gradient(ellipse 38% 28% at 82% 22%, rgba(176, 197, 255, 0.36) 0%, transparent 72%),
        radial-gradient(ellipse 30% 22% at 50% 50%, rgba(190, 255, 226, 0.22) 0%, transparent 70%);
    opacity: 0.85;
    animation: auroraPulse 14s ease-in-out infinite alternate;
    mix-blend-mode: normal;
}

[data-theme="light"] #voxel-globe-host::before {
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 30% 78%, rgba(255, 218, 196, 0.85) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 52% 17%, rgba(220, 232, 255, 0.95) 0 1.4px, transparent 2.6px),
        radial-gradient(circle at 74% 66%, rgba(232, 220, 255, 0.85) 0 1.4px, transparent 2.4px),
        radial-gradient(circle at 88% 34%, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 2.4px);
    background-size: 380px 380px, 450px 450px, 340px 340px, 500px 500px, 420px 420px;
    opacity: 0.6;
    animation: daybreakDrift 170s linear infinite;
}

[data-theme="light"] #voxel-globe-host::after {
    background:
        radial-gradient(ellipse 38% 26% at 22% 60%, rgba(255, 178, 130, 0.28) 0%, transparent 72%),
        radial-gradient(ellipse 36% 24% at 78% 30%, rgba(176, 197, 255, 0.3) 0%, transparent 72%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    mix-blend-mode: normal;
    opacity: 0.78;
    animation: auroraPulse 13s ease-in-out infinite alternate;
}

@keyframes daybreakDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-160px, -90px, 0); }
}

@keyframes auroraPulse {
    from { opacity: 0.62; transform: scale(1); }
    to { opacity: 0.92; transform: scale(1.04); }
}

/* ============================================================================
   Headers — frosted ivory glass
   ============================================================================ */

[data-theme="light"] .habitat-header,
[data-theme="light"] .atlas-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55));
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    backdrop-filter: blur(40px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 0 rgba(70, 80, 130, 0.06),
        0 12px 40px -18px rgba(70, 80, 130, 0.18);
}

[data-theme="light"] .habitat-header__wordmark {
    color: var(--accent-2);
}

[data-theme="light"] .atlas-header__kicker {
    color: var(--accent-3);
}

/* Mode pill (Habitat ↔ Atlas) */
[data-theme="light"] .habitat-header__mode,
[data-theme="light"] .atlas-header__mode {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* WS connection status pill */
[data-theme="light"] .ws-status {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .ws-status::before {
    background: var(--muted);
}

[data-theme="light"] .ws-status[data-state="connected"] {
    color: var(--success);
    border-color: rgba(15, 156, 90, 0.35);
}

[data-theme="light"] .ws-status[data-state="connected"]::before {
    background: var(--success);
    box-shadow: 0 0 8px rgba(15, 156, 90, 0.55);
}

[data-theme="light"] .ws-status[data-state="connecting"] {
    color: var(--accent-3);
}

[data-theme="light"] .ws-status[data-state="connecting"]::before {
    background: var(--accent-3);
}

[data-theme="light"] .ws-status[data-state="disconnected"],
[data-theme="light"] .ws-status[data-state="error"] {
    color: var(--danger);
    border-color: rgba(208, 53, 63, 0.32);
}

/* World context pill */
[data-theme="light"] .world-context-switcher__badge {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-secondary);
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .world-context-switcher__badge--shared {
    color: var(--accent);
    border-color: rgba(91, 110, 232, 0.32);
}

/* Message badges (red dot) — keep red but make brighter on light */
[data-theme="light"] .message-badge {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   Buttons — frosted glass with iridescent borders
   ============================================================================ */

[data-theme="light"] .btn {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(70, 80, 130, 0.06);
}

[data-theme="light"] .btn:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 12px rgba(70, 80, 130, 0.1);
}

[data-theme="light"] .btn:focus,
[data-theme="light"] .btn:focus-visible {
    border-color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(91, 110, 232, 0.25);
}

/* Primary CTA — keep the warm rose gradient (it's the brand), but tune the
   surrounding glow to feel like a daylight neon */
[data-theme="light"] .btn--primary {
    background: linear-gradient(135deg, #db2777 0%, var(--accent-warm) 52%, #f472b6 100%);
    color: #fffaf5;
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 18px rgba(219, 39, 119, 0.28),
        0 2px 6px rgba(219, 39, 119, 0.18);
}

[data-theme="light"] .btn--primary:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 10px 28px rgba(219, 39, 119, 0.36),
        0 3px 10px rgba(219, 39, 119, 0.22);
}

/* Atlas primary uses a different gradient (indigo→teal) */
[data-theme="light"] .atlas-app .btn--primary,
[data-theme="light"] .atlas-header .btn--primary {
    background: linear-gradient(135deg, #5b6ee8 0%, #0bb6a0 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 18px rgba(91, 110, 232, 0.28),
        0 2px 6px rgba(11, 182, 160, 0.2);
}

/* Ghost — was dark-navy, now ivory */
[data-theme="light"] .btn--ghost {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(11, 182, 160, 0.45);
    color: #0a8c7c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .btn--ghost:hover {
    background: rgba(11, 182, 160, 0.1);
    border-color: rgba(11, 182, 160, 0.6);
}

[data-theme="light"] .btn--danger {
    background: rgba(208, 53, 63, 0.08);
    border-color: rgba(208, 53, 63, 0.32);
    color: var(--danger);
}

/* Native select */
[data-theme="light"] .city-select {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line-strong);
    color: var(--text);
}

/* Skip link */
[data-theme="light"] .skip-link {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(91, 110, 232, 0.35);
}

/* ============================================================================
   Landing hero — frosted pearl panel with iridescent border
   ============================================================================ */

[data-theme="light"] .landing-hero {
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.55));
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 24px 60px rgba(70, 80, 130, 0.12),
        0 4px 16px rgba(70, 80, 130, 0.08);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
}

[data-theme="light"] .landing-hero__kicker {
    color: var(--accent-2);
}

[data-theme="light"] .landing-hero__title {
    color: var(--text);
    background: linear-gradient(180deg, #11182b 0%, #2c3a5e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .landing-hero__subtitle {
    color: var(--text-secondary);
}

[data-theme="light"] .landing-hero--booting {
    border-color: rgba(11, 182, 160, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(11, 182, 160, 0.22),
        0 0 36px rgba(11, 182, 160, 0.18),
        0 24px 60px rgba(70, 80, 130, 0.14);
}

/* ============================================================================
   Modals — frosted scrim
   ============================================================================ */

[data-theme="light"] .habitat-modal-backdrop {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 220, 200, 0.5) 0%, rgba(232, 220, 255, 0.55) 70%),
        rgba(244, 240, 251, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
}

/* ============================================================================
   Atlas — viewport, inspector, dpad
   ============================================================================ */

[data-theme="light"] .atlas-viewport {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.25) 100%);
}

[data-theme="light"] .viewport-frame {
    background: var(--viewport-bg);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        var(--shadow-lg),
        var(--shadow-glow),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

[data-theme="light"] .viewport-frame::after {
    background: radial-gradient(ellipse 85% 80% at 50% 45%, transparent 60%, rgba(70, 80, 130, 0.08) 100%);
}

[data-theme="light"] .world-stage {
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 218, 196, 0.45), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(176, 197, 255, 0.35), transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(190, 255, 226, 0.32), transparent 55%),
        linear-gradient(180deg, #fbf6ff 0%, #ece6f6 100%);
}

[data-theme="light"] .viewport-badge {
    background: rgba(15, 156, 90, 0.12);
    color: var(--success);
    border-color: rgba(15, 156, 90, 0.32);
}

[data-theme="light"] .viewport-chrome__meta {
    color: var(--text);
}

/* D-pad — frosted glass with indigo glyphs */
[data-theme="light"] .map-dpad {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65));
    border-color: rgba(11, 182, 160, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 12px 40px rgba(70, 80, 130, 0.18);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[data-theme="light"] .dpad-btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 252, 0.95));
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .dpad-btn:hover {
    border-color: rgba(11, 182, 160, 0.5);
}

/* Landmark search */
[data-theme="light"] .landmark-search {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[data-theme="light"] .landmark-search.is-expanded .landmark-search__bar {
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

/* Inspector */
[data-theme="light"] .atlas-inspector {
    background: rgba(255, 255, 255, 0.55);
    border-left-color: var(--line);
    -webkit-backdrop-filter: blur(40px) saturate(1.5);
    backdrop-filter: blur(40px) saturate(1.5);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .inspector-top {
    border-bottom-color: var(--line);
}

[data-theme="light"] .inspector-title {
    color: var(--accent-3);
}

[data-theme="light"] .inspector-lede,
[data-theme="light"] .meta-tile__label,
[data-theme="light"] .viewport-chrome__hint,
[data-theme="light"] .viewport-chrome__label,
[data-theme="light"] .viewport-chrome__dot,
[data-theme="light"] .card-copy,
[data-theme="light"] .overlay-copy,
[data-theme="light"] .breadcrumb-item,
[data-theme="light"] .claim-move-hint {
    color: var(--muted);
}

[data-theme="light"] .meta-tile {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .inspector-card {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 2px 8px rgba(70, 80, 130, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

[data-theme="light"] .inspector-card:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(70, 80, 130, 0.12);
}

[data-theme="light"] .eyebrow {
    color: var(--accent-3);
}

/* Inspector scrollbar — periwinkle on light */
[data-theme="light"] .inspector-scroll::-webkit-scrollbar-track {
    background: rgba(70, 80, 130, 0.06);
}

[data-theme="light"] .inspector-scroll::-webkit-scrollbar-thumb {
    background: rgba(91, 110, 232, 0.35);
}

[data-theme="light"] .inspector-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(91, 110, 232, 0.55);
}

/* ============================================================================
   Inputs & textareas — frosted glass cutout
   ============================================================================ */

[data-theme="light"] .resident-name-form__input,
[data-theme="light"] .compose-message__input,
[data-theme="light"] .compose-message__textarea,
[data-theme="light"] .habitat-search__input,
[data-theme="light"] .wizard__place-search-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow:
        inset 0 1px 2px rgba(70, 80, 130, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .resident-name-form__input::placeholder,
[data-theme="light"] .compose-message__input::placeholder,
[data-theme="light"] .compose-message__textarea::placeholder,
[data-theme="light"] .habitat-search__input::placeholder,
[data-theme="light"] .wizard__place-search-input::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

[data-theme="light"] .resident-name-form__input:focus,
[data-theme="light"] .compose-message__input:focus,
[data-theme="light"] .compose-message__textarea:focus,
[data-theme="light"] .habitat-search__input:focus,
[data-theme="light"] .wizard__place-search-input:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent);
    box-shadow:
        inset 0 1px 2px rgba(70, 80, 130, 0.06),
        0 0 0 3px rgba(91, 110, 232, 0.2);
    outline: none;
}

/* Presence roster + similar dark-tinted "embedded panel" cards */
[data-theme="light"] .presence-roster {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--line);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 1px 2px rgba(70, 80, 130, 0.04);
}

/* ============================================================================
   Theme toggle button (mounted by ui/theme-toggle.js)
   ============================================================================ */

.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    color: var(--accent-2);
    cursor: pointer;
    transition: var(--transition, all 0.2s ease);
    overflow: hidden;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle__icon {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.theme-toggle__icon--sun { display: none; }

[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line-strong);
    color: var(--accent-3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 12px rgba(70, 80, 130, 0.1);
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .theme-toggle__icon--sun { display: block; }
[data-theme="light"] .theme-toggle__icon--moon { display: none; }

/* ============================================================================
   Auth modal (firebase-auth-ui.css) — Daybreak overrides
   ============================================================================ */

[data-theme="light"] .launchauth__scrim {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 220, 200, 0.55) 0%, rgba(232, 220, 255, 0.65) 70%),
        rgba(244, 240, 251, 0.55);
}

[data-theme="light"] .launchauth__orb {
    mix-blend-mode: multiply;
    opacity: 0.45;
}

[data-theme="light"] .launchauth__orb--teal {
    background: radial-gradient(circle, rgba(11, 182, 160, 0.5) 0%, transparent 60%);
}

[data-theme="light"] .launchauth__orb--indigo {
    background: radial-gradient(circle, rgba(91, 110, 232, 0.45) 0%, transparent 62%);
}

[data-theme="light"] .launchauth__orb--amber {
    background: radial-gradient(circle, rgba(217, 118, 54, 0.4) 0%, transparent 65%);
}

[data-theme="light"] .launchauth__grain {
    mix-blend-mode: multiply;
    opacity: 0.22;
}

[data-theme="light"] .launchauth__card {
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)),
        linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(245, 240, 252, 0.92));
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(70, 80, 130, 0.06),
        0 40px 120px rgba(70, 80, 130, 0.18),
        0 12px 32px rgba(11, 182, 160, 0.08);
}

[data-theme="light"] .launchauth__card::before {
    background: linear-gradient(155deg, rgba(11, 182, 160, 0.32), rgba(91, 110, 232, 0.18) 40%, transparent 65%, rgba(217, 118, 54, 0.28) 100%);
}

[data-theme="light"] .launchauth__close {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--text-secondary);
}

[data-theme="light"] .launchauth__close:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.18);
    color: var(--text);
}

[data-theme="light"] .launchauth__brand {
    color: var(--text);
}

[data-theme="light"] .launchauth__kicker {
    color: var(--accent-2);
}

[data-theme="light"] .launchauth__title {
    background: linear-gradient(180deg, #11182b 0%, #3b4763 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .launchauth__subtitle {
    color: var(--text-secondary);
}

[data-theme="light"] .launchauth__divider {
    color: var(--muted);
}

[data-theme="light"] .launchauth__divider::before,
[data-theme="light"] .launchauth__divider::after {
    background: var(--line);
}

/* Apple stays black — that's the Apple branding requirement. Google stays
   white. Both look great on the pearl card. */

[data-theme="light"] .launchauth__email-toggle {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line-strong);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .launchauth__email-toggle:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.18);
    color: var(--text);
}

[data-theme="light"] .launchauth__segment {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--line);
}

[data-theme="light"] .launchauth__segment-option {
    color: var(--muted);
}

[data-theme="light"] .launchauth__segment-option.is-active {
    color: var(--text);
}

[data-theme="light"] .launchauth__segment-thumb {
    background: linear-gradient(135deg, rgba(91, 110, 232, 0.18), rgba(11, 182, 160, 0.18));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 8px rgba(70, 80, 130, 0.12);
}

[data-theme="light"] .launchauth__field {
    color: var(--muted);
}

[data-theme="light"] .launchauth__field input {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--line-strong);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(70, 80, 130, 0.06);
}

[data-theme="light"] .launchauth__field input::placeholder {
    color: rgba(15, 23, 42, 0.32);
}

[data-theme="light"] .launchauth__field input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(91, 110, 232, 0.18);
}

[data-theme="light"] .launchauth__submit {
    background: linear-gradient(135deg, #5b6ee8 0%, #0bb6a0 100%);
    color: #fff;
    box-shadow:
        0 10px 28px rgba(91, 110, 232, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .launchauth__submit:hover:not(:disabled) {
    box-shadow:
        0 16px 36px rgba(91, 110, 232, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .launchauth__error {
    background: rgba(208, 53, 63, 0.08);
    border-color: rgba(208, 53, 63, 0.32);
    color: #8a1a22;
}

[data-theme="light"] .launchauth__footer {
    border-top-color: var(--line);
}

[data-theme="light"] .launchauth__guest {
    color: var(--text-secondary);
}

[data-theme="light"] .launchauth__guest:hover {
    color: var(--text);
}

[data-theme="light"] .launchauth__fineprint {
    color: var(--muted);
}

[data-theme="light"] .launchauth__fineprint a {
    color: var(--accent-2);
    border-bottom-color: rgba(11, 182, 160, 0.32);
}

[data-theme="light"] .launchauth__fineprint a:hover {
    color: #08826f;
    border-bottom-color: rgba(11, 182, 160, 0.6);
}

/* ============================================================================
   Header instrument-cluster — Daybreak overrides
   Re-tints the segmented trays from header-cluster.css for the pearl canvas.
   ============================================================================ */

[data-theme="light"] .header-tray,
[data-theme="light"] .habitat-header__mode,
[data-theme="light"] .atlas-header__mode,
[data-theme="light"] .world-context-switcher,
[data-theme="light"] .ws-status {
    --tray-divider: rgba(15, 23, 42, 0.09);
    --tray-fill: rgba(255, 255, 255, 0.62);
    --tray-border: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 6px 18px rgba(70, 80, 130, 0.1);
}

[data-theme="light"] .header-tray > *:hover {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .header-tray > *:focus-visible {
    outline-color: var(--accent);
}

/* Icon tray cells in light: cool slate icons, teal hover wash on toggle */
[data-theme="light"] .header-tray--icons > * {
    color: var(--text-secondary);
}

[data-theme="light"] .header-tray--icons .theme-toggle {
    background: transparent;
    color: var(--accent-3);
    box-shadow: none;
}

[data-theme="light"] .header-tray--icons .theme-toggle:hover {
    background: rgba(217, 118, 54, 0.12);
    border-color: transparent;
}

[data-theme="light"] .header-tray--icons .message-badge-container > .btn:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--text);
}

[data-theme="light"] .header-tray--icons .message-badge {
    box-shadow: 0 0 0 2px var(--bg-deep, #f4f0fb);
}

/* Mode segment: warm rose fill is the active state; ghost rests as slate.
   Neutralize the global primary gradients so the segmented control is the only
   thing painting fills inside it (otherwise the inactive Habitat link in the
   Atlas mode segment shows the loud indigo→teal CTA gradient). */
[data-theme="light"] .habitat-header__mode > .btn,
[data-theme="light"] .atlas-header__mode > .btn,
[data-theme="light"] .habitat-header__mode > .btn--primary,
[data-theme="light"] .atlas-header__mode > .btn--primary,
[data-theme="light"] .atlas-header .atlas-header__mode > .btn--primary {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    box-shadow: none;
    text-shadow: none;
}

[data-theme="light"] .habitat-header__mode > .btn--primary:hover,
[data-theme="light"] .atlas-header__mode > .btn--primary:hover,
[data-theme="light"] .atlas-header .atlas-header__mode > .btn--primary:hover {
    box-shadow: none;
}

[data-theme="light"] .habitat-header__mode > .btn:hover,
[data-theme="light"] .atlas-header__mode > .btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text);
}

[data-theme="light"] .habitat-header__mode > .btn--primary[aria-current="page"],
[data-theme="light"] .habitat-header__mode > .habitat-header__mode-current,
[data-theme="light"] .atlas-header__mode > .btn--primary[aria-current="page"],
[data-theme="light"] .atlas-header__mode > .atlas-header__mode-current {
    background: linear-gradient(180deg, rgba(233, 79, 147, 0.18), rgba(233, 79, 147, 0.08));
    color: #b81d63;
    box-shadow: inset 0 0 0 1px rgba(233, 79, 147, 0.36);
    text-shadow: 0 0 14px rgba(233, 79, 147, 0.3);
}

/* WS status — light glass dot pill */
[data-theme="light"] .ws-status {
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .ws-status::before {
    background: var(--muted);
}

[data-theme="light"] .ws-status[data-state="connected"]::before {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(15, 156, 90, 0.14), 0 0 10px rgba(15, 156, 90, 0.45);
}

[data-theme="light"] .ws-status[data-state="connecting"]::before {
    background: var(--accent-3);
    box-shadow: 0 0 0 4px rgba(217, 118, 54, 0.14), 0 0 10px rgba(217, 118, 54, 0.45);
}

[data-theme="light"] .ws-status[data-state="disconnected"]::before,
[data-theme="light"] .ws-status[data-state="error"]::before {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(208, 53, 63, 0.14), 0 0 10px rgba(208, 53, 63, 0.45);
}

/* World-context-switcher — light frosted chip with slate text */
[data-theme="light"] .world-context-switcher__badge {
    color: var(--text-secondary);
}

[data-theme="light"] .world-context-switcher__badge--shared {
    color: #08826f;
}

[data-theme="light"] .world-context-switcher__badge--shared::before {
    background: var(--accent-2);
    box-shadow: 0 0 0 3px rgba(11, 182, 160, 0.18), 0 0 8px rgba(11, 182, 160, 0.55);
}

[data-theme="light"] .world-context-switcher__badge--private {
    color: var(--accent-3);
}

[data-theme="light"] .world-context-switcher__badge--private::before {
    background: var(--accent-3);
    box-shadow: 0 0 0 3px rgba(217, 118, 54, 0.18), 0 0 8px rgba(217, 118, 54, 0.55);
}

[data-theme="light"] .world-context-switcher__button {
    color: var(--text-secondary);
}

[data-theme="light"] .world-context-switcher__button:hover {
    background: rgba(15, 23, 42, 0.05);
    color: var(--text);
}

/* ============================================================================
   Reduced motion — calm the aurora + bokeh
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    [data-theme="light"] .habitat-app::before,
    [data-theme="light"] .habitat-app::after,
    [data-theme="light"] #voxel-globe-host::before,
    [data-theme="light"] #voxel-globe-host::after {
        animation: none;
    }
}

/* ============================================================================
   Wizard dioramas — daybreak retune
   ----------------------------------------------------------------------------
   The dark dioramas in habitat-entry.css use saturated dusk skies and a
   silhouette ink near black. On light theme we want airier pastel skies, a
   warmer floor, lighter card chrome, and a softer ink tone so the
   silhouette figures still read but never feel like cutouts pasted onto
   parchment. The diorama markup and per-option modifiers don't change —
   only the tokens that drive them.
   ============================================================================ */

:root[data-theme="light"] {
    /* Skies: shift everything one stop lighter; keep the gradient direction */
    --wizard-scene-sky-morning: linear-gradient(178deg, #fde9c8 0%, #f6c9a4 32%, #d99dab 68%, #b59ad6 100%);
    --wizard-scene-sky-midday: linear-gradient(178deg, #d8ecf6 0%, #c2dded 36%, #a4bcd4 72%, #8b9bbf 100%);
    --wizard-scene-sky-evening: linear-gradient(178deg, #fbcb95 0%, #e69683 28%, #b380a8 64%, #6f6592 100%);
    --wizard-scene-sky-night: linear-gradient(178deg, #4d5c8a 0%, #4a5c8a 38%, #364877 72%, #1f2a4f 100%);
    --wizard-scene-sky-dawn: linear-gradient(178deg, #f3d4e6 0%, #d3afd3 28%, #9389b8 64%, #534975 100%);
    --wizard-scene-sky-lantern: linear-gradient(178deg, #503a30 0%, #3d2a23 42%, #261612 78%, #160a08 100%);

    /* Floors: warmer, paler tints for an ivory-room feel */
    --wizard-scene-floor-wood: #c79b78;
    --wizard-scene-floor-wood-plank: #b9876a;
    --wizard-scene-floor-stone: #c8cad0;
    --wizard-scene-floor-fabric: #c5b8d4;
    --wizard-scene-floor-studio: #d6d4dc;
    --wizard-scene-floor-void: #2a2440;

    /* Light: a touch more luminous on light bg */
    --wizard-scene-light-glow-alpha-idle: 0.5;
    --wizard-scene-light-glow-alpha-hover: 0.65;
    --wizard-scene-light-glow-alpha-selected: 0.88;

    /* Card chrome: shift to cool periwinkle drop shadows (matches body) */
    --wizard-scene-card-shadow-idle: 0 6px 22px rgba(70, 80, 130, 0.10);
    --wizard-scene-card-shadow-hover: 0 14px 34px rgba(70, 80, 130, 0.14);
    --wizard-scene-card-shadow-selected: 0 22px 56px rgba(70, 80, 130, 0.22);
    --wizard-scene-card-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --wizard-scene-card-dim-unselected: 0.86;

    /* Frame vignette: lighter, less inky */
    --wizard-scene-frame-vignette-alpha: 0.18;
}

/* Diorama background gradient on the choice card itself reads warmer on
 * light theme — re-do the linear-gradient layered behind the diorama. */
[data-theme="light"] .wizard__choice-card {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.55) 50%),
        linear-gradient(142deg, color-mix(in oklab, var(--choice-accent) 16%, #faf5ff), color-mix(in oklab, var(--choice-accent) 8%, #f3eefb));
}

[data-theme="light"] .wizard__spirit-card {
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.55) 50%),
        linear-gradient(142deg, color-mix(in oklab, var(--spirit-accent) 16%, #faf5ff), color-mix(in oklab, var(--spirit-accent) 8%, #f3eefb));
}

/* Silhouette figures: lighter ink so they read on pale floors instead of
 * looking pasted-on. */
[data-theme="light"] .wizard__diorama-figure {
    --figure-ink: rgba(28, 30, 56, 0.78);
}

[data-theme="light"] .wizard__diorama-prop {
    --prop-ink: rgba(34, 36, 64, 0.72);
    --prop-ink-light: rgba(50, 52, 84, 0.5);
}

/* Spirit canvas frame on light theme — soften the dark inner background */
[data-theme="light"] .wizard__spirit-card-preview {
    background:
        radial-gradient(circle at 24% 18%, color-mix(in oklab, var(--spirit-accent) 26%, transparent), transparent 58%),
        linear-gradient(160deg, rgba(245, 240, 252, 0.92), rgba(232, 226, 248, 0.94));
}