/* ══════════════════════════════════════════════════
   DARK THEME — public site
   Loaded by default. Swapped to theme-light.css
   when the user clicks the sun/moon toggle.
══════════════════════════════════════════════════ */

:root {
    --dark-page-top: #060d1e;
    --dark-page-mid: #0d1830;
    --dark-page-bottom: #09111f;
    --dark-card: #0f1f3d;
    --dark-card-soft: #152540;
    --dark-card-strong: #1a3054;
    --dark-text: #edf2f8;
    --dark-text-soft: #c3d4e6;
    --dark-text-muted: #9ab2c8;
    --dark-border: #244165;
    --dark-accent: #f1f5f9;
    --dark-accent-text: #09101d;
}

/* ── Base sky ── */
html {
    background:
        radial-gradient(circle at top center, rgba(80, 124, 187, 0.16) 0, rgba(80, 124, 187, 0) 28%),
        linear-gradient(180deg, var(--dark-page-top) 0%, var(--dark-page-mid) 55%, var(--dark-page-bottom) 100%);
}
body {
    background:
        radial-gradient(circle at 15% 0%, rgba(81, 140, 214, 0.14) 0, rgba(81, 140, 214, 0) 24%),
        radial-gradient(circle at 85% 18%, rgba(117, 60, 190, 0.10) 0, rgba(117, 60, 190, 0) 22%),
        linear-gradient(180deg, var(--dark-page-top) 0%, var(--dark-page-mid) 55%, var(--dark-page-bottom) 100%);
    color: var(--dark-text-soft);
}

/* ── Hero & trusted ── */
.hero-bg {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0) 20%),
        linear-gradient(180deg, #060d1e 0%, #1b0e34 55%, #0d1b3c 100%);
}
.trusted-bg {
    background: linear-gradient(180deg, #0d1b3c 0%, #081223 100%);
}

/* ── Section fields — add separation between dark sections ── */
[data-edit-section="devices"] {
    background: linear-gradient(180deg, #081223 0%, #091624 100%) !important;
}

[data-edit-section="project"] {
    background: linear-gradient(180deg, #091624 0%, #0d1a31 58%, #0a1730 100%) !important;
}

[data-edit-section="finance"] {
    background: linear-gradient(180deg, #091624 0%, #0d1a31 58%, #0a1730 100%) !important;
}

[data-edit-section="features"] {
    background: linear-gradient(180deg, #0a1730 0%, #0d1d37 100%) !important;
}

[data-edit-section="testimonials"] {
    background: linear-gradient(180deg, #0d1d37 0%, #0a1a31 100%) !important;
}

[data-edit-section="pricing"] {
    background: linear-gradient(180deg, #0a1a31 0%, #10223e 100%) !important;
}

[data-edit-section="tenant_billing"] {
    background: linear-gradient(180deg, #10223e 0%, #0d1c34 100%) !important;
}

[data-edit-section="blog"] {
    background: linear-gradient(180deg, #0d1c34 0%, #0a1629 100%) !important;
}

[data-edit-section="wallet_promo"] {
    background: linear-gradient(180deg, #0a1629 0%, #08111f 100%) !important;
}

[data-edit-section="community"] {
    background: linear-gradient(180deg, #08111f 0%, #060d1e 100%) !important;
}

section:not([data-edit-section]):not(.has-custom-bg):not(.hero-bg):not(.trusted-bg) {
    background: linear-gradient(180deg, #081223 0%, #0b172b 100%) !important;
}

/* ── Clouds: dim against dark sky ── */
.hero-cloud-left,
.hero-cloud-right {
    opacity: calc(0.07 * var(--hero-cloud-visibility, 1)) !important;
    filter: saturate(0) brightness(3) !important;
}

/* ── Nav ── */
.framer-nav-pill {
    background-color: rgba(45, 58, 84, 0.78) !important;
    border-color: rgba(255,255,255,0.12) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.26) !important;
}

.framer-nav-logo             { color: #e2e8f0; }
.framer-nav-links a          { color: #c8d8ec; }
.framer-nav-links a:hover,
.framer-nav-links a.is-active { background-color: rgba(255,255,255,0.88); color: #101828 !important; }
.framer-nav-links a:hover { background-color: rgba(255,255,255,0.12); }
.framer-nav-cta--outline     { color: #c8d8ec; border-color: rgba(255,255,255,0.22); }
.framer-nav-cta--outline:hover { background-color: rgba(255,255,255,0.10); color: #e2eef8; }
.framer-nav-cta {
    background-color: #1e1715;
    color: #ffffff;
}
.framer-nav-cta:hover {
    background-color: #2a221f;
    color: #ffffff;
    opacity: 1;
}

.framer-nav-pill.is-scrolled {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background-color: rgba(24, 35, 58, 0.92) !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
}

/* ── Product mockup frames (keep inner UI light on dark pages) ── */
.dashboard-mockup-shell {
    background: linear-gradient(145deg, rgba(100, 155, 205, 0.42) 0%, rgba(180, 140, 100, 0.28) 55%, rgba(120, 90, 140, 0.22) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38) !important;
}

.dashboard-mockup-panel {
    background: #ffffff !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
    color: #111827 !important;
}

.dashboard-mockup-panel .text-gray-900 { color: #111827 !important; }
.dashboard-mockup-panel .text-gray-800 { color: #1f2937 !important; }
.dashboard-mockup-panel .text-gray-700 { color: #374151 !important; }
.dashboard-mockup-panel .text-gray-600 { color: #4b5563 !important; }
.dashboard-mockup-panel .text-gray-500 { color: #6b7280 !important; }
.dashboard-mockup-panel .bg-gray-50 { background-color: #f9fafb !important; }
.dashboard-mockup-panel .bg-gray-100 { background-color: #f3f4f6 !important; }
.dashboard-mockup-panel .border-gray-200 { border-color: #e5e7eb !important; }
.dashboard-mockup-panel .project-row { background-color: #f9fafb !important; }
.dashboard-mockup-panel .project-row:hover { background-color: #f3f4f6 !important; }

/* ── Cards and utility backgrounds ── */
.bg-white                   { background-color: var(--dark-card) !important; }
.bg-white\/70               { background-color: rgba(15,31,61,0.78) !important; }
.bg-gray-50                 { background-color: #0b1830 !important; }
.bg-gray-50\/40             { background-color: rgba(11,24,48,0.44) !important; }
.bg-gray-100                { background-color: var(--dark-card-soft) !important; }

[style*="#0e2644"] {
    background: linear-gradient(180deg, #173055 0%, #132948 42%, #0f2039 100%) !important;
    border-color: #2e5687 !important;
}

/* Finance chart area */
#finance-chart {
    background: linear-gradient(to bottom, rgba(15,40,80,0.6), transparent) !important;
}

/* ── Text → light and readable ── */
.text-gray-900 { color: var(--dark-text) !important; }
.text-gray-800 { color: #dce6f0 !important; }
.text-gray-700 { color: #c6d7e8 !important; }
.text-gray-600 { color: #afc5d8 !important; }
.text-gray-500 { color: var(--dark-text-muted) !important; }
.text-gray-400 { color: #7f99b2 !important; }

/* ── Borders ── */
.border-gray-100 { border-color: #192e4a !important; }
.border-gray-200 { border-color: #1e3860 !important; }
.border-gray-300 { border-color: #2a4870 !important; }

/* ── Hover states ── */
.hover\:bg-gray-50:hover    { background-color: #0b1830 !important; }
.hover\:bg-gray-100:hover   { background-color: #152540 !important; }
.hover\:bg-white\/30:hover  { background-color: rgba(255,255,255,0.10) !important; }

/* ── Buttons and dark pills on dark backgrounds ── */
a.bg-gray-900,
button.bg-gray-900,
.inline-flex.bg-gray-900,
.block.bg-gray-900 {
    background: var(--dark-accent) !important;
    color: var(--dark-accent-text) !important;
    border-color: rgba(255,255,255,0.7) !important;
}

a.bg-gray-900:hover,
button.bg-gray-900:hover,
.inline-flex.bg-gray-900:hover,
.block.bg-gray-900:hover {
    background: #dce7f1 !important;
    color: #08101c !important;
}

.hero-actions a:last-child,
[data-edit-section] .border.border-gray-200.bg-gray-50,
[data-edit-section] a.border.border-gray-200.bg-gray-50 {
    background: rgba(255,255,255,0.04) !important;
    color: var(--dark-text) !important;
    border-color: rgba(255,255,255,0.14) !important;
}

.hero-actions a:last-child:hover,
[data-edit-section] .border.border-gray-200.bg-gray-50:hover,
[data-edit-section] a.border.border-gray-200.bg-gray-50:hover {
    background: rgba(255,255,255,0.08) !important;
}

/* ── Project rows ── */
.project-row       { background-color: #0b1830 !important; }
.project-row:hover { background-color: #152540 !important; }

/* ── Footer ── */
.public-site-footer {
    background: linear-gradient(180deg, #060d1e 0%, #050a15 100%) !important;
}

.public-site-footer__card {
    max-width: 64rem;
    margin: 0 auto;
    background: rgba(10, 23, 43, 0.86) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 50px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.public-site-footer__title,
.public-site-footer__links a,
.public-site-footer__bottom,
.public-site-footer .text-gray-500 {
    color: var(--dark-text-soft) !important;
}

.public-site-footer__links a:hover {
    color: #ffffff !important;
}

.public-site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Aurora section ── */
.aurora-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.aurora-section::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 55% at 22% 48%, rgba(0,210,130,0.11) 0%, transparent 58%),
        radial-gradient(ellipse 48% 65% at 78% 35%, rgba(110,35,230,0.14) 0%, transparent 58%),
        radial-gradient(ellipse 65% 42% at 50% 78%, rgba(0,130,230,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 10% 20%, rgba(0,180,160,0.08) 0%, transparent 50%);
    animation: aurora-shift 20s ease-in-out infinite alternate;
}
@keyframes aurora-shift {
    0%   { transform: translate(0%, 0%) scale(1.00); opacity: 0.65; }
    30%  { transform: translate(-7%, 4%) scale(1.07); opacity: 1.00; }
    60%  { transform: translate(5%, -4%) scale(0.96); opacity: 0.80; }
    100% { transform: translate(-3%, 7%) scale(1.04); opacity: 1.00; }
}

/* ── Stars ── */
.night-stars { pointer-events: none; display: block; }
.night-stars .tw {
    animation: twinkle var(--td, 3s) ease-in-out infinite;
    animation-delay: var(--dl, 0s);
}
@keyframes twinkle {
    0%, 100% { opacity: var(--star-base-op, 0.4); }
    50% { opacity: 1; }
}

/* ── Theme toggle icon ── */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }