/* ===================================================
   Void - Dark/Light Theme System
   Detects system preference, allows manual override
   =================================================== */

/* CSS Variables - Light Mode (default) */
:root {
  --void-bg-page: #ffffff;
  --void-bg-surface: #ffffff;
  --void-bg-elevated: #f7f7f7;
  --void-bg-card: #ffffff;
  --void-bg-input: #f2f2f2;
  --void-bg-nav: rgba(255, 255, 255, 0.65);
  
  --void-text-primary: #131313;
  --void-text-secondary: #5c5c5c;
  --void-text-muted: #989da6;
  --void-text-placeholder: rgba(0, 0, 0, 0.5);
  
  --void-border: #e3e3e3;
  --void-border-light: #ededed;
  --void-border-card: #d3d7de;
  
  --void-accent: #5aa375;
  --void-accent-light: #72b58b;
  --void-accent-bg: #e8eee9;
  
  --void-shadow: 0 1px 2px rgba(0,0,0,0.05);
  --void-shadow-card: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  
  --void-btn-primary-bg: rgb(18, 18, 18);
  --void-btn-primary-text: #ffffff;
  --void-btn-secondary-bg: rgb(242, 242, 242);
  --void-btn-secondary-text: rgb(0, 0, 0);
  
  --void-footer-text: rgb(224, 224, 224);
  --void-footer-bg: transparent;
  
  --void-note-text: rgb(117, 117, 117);
  --void-note-title: rgb(0, 0, 0);
  --void-note-bg: #ffffff;
  --void-note-border: #e1e5eb;
  
  --void-faq-bg: rgb(247, 247, 247);
  --void-faq-text: rgb(31, 31, 31);
  --void-faq-body: rgb(153, 153, 153);
  --void-faq-border: rgb(247, 247, 247);
  
  --void-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --void-bg-page: #0e0e10;
  --void-bg-surface: #18181b;
  --void-bg-elevated: #1f1f23;
  --void-bg-card: #1c1c1f;
  --void-bg-input: #27272a;
  --void-bg-nav: rgba(15, 15, 17, 0.75);
  
  --void-text-primary: #f0f0f0;
  --void-text-secondary: #a0a0a8;
  --void-text-muted: #636370;
  --void-text-placeholder: rgba(255, 255, 255, 0.35);
  
  --void-border: #2e2e35;
  --void-border-light: #252529;
  --void-border-card: #2e2e38;
  
  --void-accent: #5aa375;
  --void-accent-light: #72b58b;
  --void-accent-bg: #1a2e22;
  
  --void-shadow: 0 1px 2px rgba(0,0,0,0.4);
  --void-shadow-card: 0 10px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  
  --void-btn-primary-bg: #f0f0f0;
  --void-btn-primary-text: #0e0e10;
  --void-btn-secondary-bg: #27272a;
  --void-btn-secondary-text: #f0f0f0;
  
  --void-footer-text: rgba(100, 100, 110, 0.8);
  --void-footer-bg: transparent;
  
  --void-note-text: rgb(140, 140, 150);
  --void-note-title: rgb(225, 225, 235);
  --void-note-bg: #1c1c1f;
  --void-note-border: #2e2e35;
  
  --void-faq-bg: #1c1c1f;
  --void-faq-text: rgb(225, 225, 235);
  --void-faq-body: rgb(140, 140, 150);
  --void-faq-border: #2e2e35;
}

/* ========================
   Apply theme to elements
   ======================== */

/* Smooth transition for theme changes */
html, body, 
.framer-CJ6fW.framer-9sox7p,
.framer-yVnhK.framer-72rtr7,
.framer-yVnhK.framer-1uf44h8,
.framer-CJ6fW .framer-1l92hf9 {
  transition: var(--void-transition);
}

/* Page backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] #main,
[data-theme="dark"] .framer-CJ6fW.framer-9sox7p,
[data-theme="dark"] .framer-yVnhK.framer-72rtr7 {
  background-color: var(--void-bg-page) !important;
}

[data-theme="dark"] style[data-framer-html-style] {
  display: none;
}

/* Override Framer inline background styles */
[data-theme="dark"] .framer-CJ6fW.framer-9sox7p {
  background-color: var(--void-bg-page) !important;
}

/* Navbar */
[data-theme="dark"] .framer-CJ6fW .framer-1l92hf9 {
  background-color: var(--void-bg-nav) !important;
  border-color: var(--void-border) !important;
}

/* Nav links */
[data-theme="dark"] .framer-CJ6fW .framer-1k9wrfu [class*="framer-text"],
[data-theme="dark"] .framer-CJ6fW .framer-1dgyci7 [class*="framer-text"],
[data-theme="dark"] .framer-CJ6fW .framer-16wyuhy [class*="framer-text"],
[data-theme="dark"] .framer-CJ6fW .framer-yk0arc [class*="framer-text"] {
  color: var(--void-text-muted) !important;
}

/* CTA button in nav */
[data-theme="dark"] .framer-O9N14 .framer-1jodurh {
  background-color: var(--void-btn-primary-bg) !important;
}
[data-theme="dark"] .framer-O9N14 .framer-yb60z9 [class*="framer-text"] {
  color: var(--void-btn-primary-text) !important;
}

/* Hero section headings */
[data-theme="dark"] .framer-yVnhK .framer-cilv00 [class*="framer-text"],
[data-theme="dark"] .framer-yVnhK .framer-1opdsxw [class*="framer-text"] {
  color: var(--void-text-primary) !important;
}

/* Hero sub text */
[data-theme="dark"] .framer-CJ6fW .framer-1s0muep p,
[data-theme="dark"] .framer-1s0muep .framer-text {
  color: var(--void-text-muted) !important;
}

/* Input / waitlist form */
[data-theme="dark"] .framer-custom-input {
  background: var(--void-bg-input) !important;
  color: var(--void-text-primary) !important;
  border-color: var(--void-border) !important;
  --framer-custom-placeholder-color: rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .framer-custom-input + div input[type="submit"] {
  background: var(--void-btn-primary-bg) !important;
  color: var(--void-btn-primary-text) !important;
}

/* UVP labels (Early access, Clear mind) */
[data-theme="dark"] .framer-mjdk0p [class*="framer-text"],
[data-theme="dark"] .framer-1qk15g1 [class*="framer-text"] {
  color: var(--void-text-muted) !important;
}

/* Sub-heading label */
[data-theme="dark"] .framer-1cnd5tp [class*="framer-text"] {
  color: var(--void-text-secondary) !important;
}

/* Device cards - "The old way" */
[data-theme="dark"] .framer-nbtoi9,
[data-theme="dark"] .framer-fn3z0w {
  background-color: var(--void-bg-card) !important;
  border-color: var(--void-border-card) !important;
  box-shadow: var(--void-shadow-card) !important;
}

[data-theme="dark"] .framer-1l8nz36,
[data-theme="dark"] .framer-w1dyrg {
  background-color: var(--void-bg-card) !important;
}

[data-theme="dark"] .framer-nbtoi9 [class*="framer-text"],
[data-theme="dark"] .framer-fn3z0w [class*="framer-text"] {
  color: var(--void-note-text) !important;
}

[data-theme="dark"] .framer-guvjld [class*="framer-text"],
[data-theme="dark"] .framer-ilipyk [class*="framer-text"],
[data-theme="dark"] .framer-1h7epls [class*="framer-text"],
[data-theme="dark"] .framer-1mvnxio [class*="framer-text"],
[data-theme="dark"] .framer-n4lqdm [class*="framer-text"] {
  color: var(--void-note-title) !important;
}

/* Note list items */
[data-theme="dark"] .framer-uqydbl,
[data-theme="dark"] .framer-1q99byq,
[data-theme="dark"] .framer-16qnmz2,
[data-theme="dark"] .framer-iaa0yc,
[data-theme="dark"] .framer-p16j3o {
  border-color: var(--void-note-border) !important;
}

/* Pill at top of device */
[data-theme="dark"] .framer-tshth,
[data-theme="dark"] .framer-1xezjl2 {
  background-color: var(--void-bg-elevated) !important;
}

/* Bottom write bar in device */
[data-theme="dark"] .framer-40whcd {
  background-color: var(--void-bg-elevated) !important;
  border-color: var(--void-border) !important;
  box-shadow: var(--void-shadow) !important;
}

/* "The old way" label */
[data-theme="dark"] .framer-sde9ti [class*="framer-text"] {
  color: var(--void-text-muted) !important;
}

/* Benefits section background */
[data-theme="dark"] .framer-se1o4n {
  border-color: var(--void-border-card) !important;
}
[data-theme="dark"] .framer-1vdlho4 {
  background: linear-gradient(var(--void-bg-card) 60%, #0e1a1a 100%) !important;
  border-color: var(--void-border-card) !important;
}
[data-theme="dark"] .framer-bdkuew {
  background: linear-gradient(var(--void-bg-card) 60%, #1a1a0e 100%) !important;
}
[data-theme="dark"] .framer-q68tq4 {
  background: linear-gradient(var(--void-bg-card) 40%, #0e1a10 100%) !important;
  border-color: var(--void-border-card) !important;
}
[data-theme="dark"] .framer-1olvgv2 {
  border-color: var(--void-border-card) !important;
}

/* H2 headings */
[data-theme="dark"] [class*="framer-styles-preset-1sda3b7"],
[data-theme="dark"] [class*="framer-styles-preset-1eh37kd"] {
  --framer-text-color: var(--void-text-primary) !important;
}

/* H3 headings */
[data-theme="dark"] [class*="framer-styles-preset-1bh4bwf"] {
  --framer-text-color: var(--void-text-primary) !important;
}

/* Body text / p */
[data-theme="dark"] [class*="framer-styles-preset-1z08md0"],
[data-theme="dark"] [class*="framer-styles-preset-u12mba"] {
  --framer-text-color: var(--void-text-muted) !important;
}

/* Import buttons */
[data-theme="dark"] .framer-5cd54y,
[data-theme="dark"] .framer-1svcgy6,
[data-theme="dark"] .framer-5nuhr6 {
  background-color: var(--void-bg-elevated) !important;
  border-color: var(--void-border) !important;
}

[data-theme="dark"] .framer-12mp0el [class*="framer-text"],
[data-theme="dark"] .framer-rrk7ss [class*="framer-text"],
[data-theme="dark"] .framer-1xt2cel [class*="framer-text"] {
  color: var(--void-text-primary) !important;
}

/* Icon backgrounds */
[data-theme="dark"] .framer-l5p4sn,
[data-theme="dark"] .framer-73y2c6 {
  background-color: var(--void-bg-card) !important;
  border-color: var(--void-border) !important;
}

/* Card swipe area */
[data-theme="dark"] .framer-19ary63,
[data-theme="dark"] .framer-7wap5c,
[data-theme="dark"] .framer-6voqlo,
[data-theme="dark"] .framer-5rucfh,
[data-theme="dark"] .framer-19h0y8j,
[data-theme="dark"] .framer-pjliim {
  background-color: var(--void-bg-card) !important;
}
[data-theme="dark"] .framer-1b0t19v [class*="framer-text"],
[data-theme="dark"] .framer-15vqy2o [class*="framer-text"],
[data-theme="dark"] .framer-3lozu5 [class*="framer-text"],
[data-theme="dark"] .framer-1yfsren [class*="framer-text"],
[data-theme="dark"] .framer-hbv90w [class*="framer-text"],
[data-theme="dark"] .framer-1fwud6g [class*="framer-text"] {
  color: var(--void-text-secondary) !important;
}

/* Weekly reflection button */
[data-theme="dark"] .framer-10k3vou {
  background-color: var(--void-bg-elevated) !important;
  border-color: var(--void-border) !important;
  box-shadow: var(--void-shadow) !important;
}

/* Source chip */
[data-theme="dark"] .framer-1dq4q6b {
  background-color: var(--void-bg-elevated) !important;
}
[data-theme="dark"] .framer-73yld9 {
  background-color: var(--void-bg-elevated) !important;
}

/* Icon colors for dark mode */
[data-theme="dark"] .framer-msfa03 {
  background-color: var(--void-bg-elevated) !important;
}

/* FAQ section */
[data-theme="dark"] .framer-1ogf3cp-container > div > div {
  background-color: var(--void-faq-bg) !important;
  border-color: var(--void-faq-border) !important;
}
[data-theme="dark"] .framer-1ogf3cp-container h4 {
  color: var(--void-faq-text) !important;
}
[data-theme="dark"] .framer-1ogf3cp-container p {
  color: var(--void-faq-body) !important;
}
[data-theme="dark"] .framer-1ogf3cp-container button {
  background-color: transparent !important;
}

/* FAQ inline styles override */
[data-theme="dark"] [style*="background-color:rgb(247, 247, 247)"] {
  background-color: var(--void-faq-bg) !important;
}
[data-theme="dark"] [style*="color:rgb(31, 31, 31)"] {
  color: var(--void-faq-text) !important;
}
[data-theme="dark"] [style*="color:rgb(153, 153, 153)"] {
  color: var(--void-faq-body) !important;
}
[data-theme="dark"] [style*="border:1px solid rgb(247, 247, 247)"] {
  border-color: var(--void-faq-border) !important;
}

/* Footer */
[data-theme="dark"] .framer-17msnkr {
  background-color: var(--void-bg-page) !important;
}
[data-theme="dark"] .framer-1tssm3a [class*="framer-text"],
[data-theme="dark"] .framer-1tssm3a p {
  color: rgb(50, 50, 58) !important;
}
[data-theme="dark"] .framer-1qo263l [class*="framer-text"],
[data-theme="dark"] .framer-1dgyci7 [class*="framer-text"],
[data-theme="dark"] .framer-16wyuhy [class*="framer-text"],
[data-theme="dark"] .framer-yk0arc [class*="framer-text"] {
  color: var(--void-text-muted) !important;
}

/* Gradient overlays - adapt for dark */
[data-theme="dark"] .framer-u6ugdz {
  background: linear-gradient(rgba(14,14,16,0) 0%, rgb(14,14,16) 100%) !important;
}
[data-theme="dark"] .framer-1fpj967 {
  background: linear-gradient(rgba(28,28,31,0) 0%, rgb(28,28,31) 100%) !important;
}
[data-theme="dark"] .framer-ln6eyj {
  background: linear-gradient(rgb(14,14,16) 0%, #0d1f11 100%) !important;
}
[data-theme="dark"] .framer-u6ugdz,
[data-theme="dark"] .framer-1l2ozp2 {
  background: linear-gradient(rgba(14,14,16,0) 0%, rgb(14,14,16) 100%) !important;
}

/* Blog-specific */
[data-theme="dark"] article,
[data-theme="dark"] .blog-content,
[data-theme="dark"] main {
  background-color: var(--void-bg-page) !important;
  color: var(--void-text-primary) !important;
}

/* General text overrides for dark mode - headings */
[data-theme="dark"] h1[class*="framer-text"],
[data-theme="dark"] h2[class*="framer-text"],
[data-theme="dark"] h3[class*="framer-text"],
[data-theme="dark"] h4[class*="framer-text"] {
  color: var(--void-text-primary) !important;
}

/* White card backgrounds for modals and popups */
[data-theme="dark"] .framer-13mproc {
  background-color: var(--void-bg-card) !important;
}
[data-theme="dark"] .framer-nl5msr {
  background-color: var(--void-bg-card) !important;
}

/* Inject background on html element for full-page dark */
[data-theme="dark"] html {
  background-color: var(--void-bg-page) !important;
}

/* Note items in the right panel */
[data-theme="dark"] .framer-14awiy0,
[data-theme="dark"] .framer-omx58c {
  border-color: var(--void-note-border) !important;
}
[data-theme="dark"] .framer-7drhhd [class*="framer-text"],
[data-theme="dark"] .framer-5pzb19 [class*="framer-text"] {
  color: var(--void-note-text) !important;
}

/* Icon/tag text */
[data-theme="dark"] .framer-1pvesq3 [class*="framer-text"],
[data-theme="dark"] .framer-oquw83 [class*="framer-text"] {
  color: var(--void-text-muted) !important;
}

/* Blog posts */
[data-theme="dark"] body {
  background-color: var(--void-bg-page) !important;
  color: var(--void-text-primary) !important;
}

/* Preserve accent colors */
[data-theme="dark"] .framer-1cnd5tp span[style*="token-27b3fce4"],
[data-theme="dark"] [style*="token-27b3fce4"] {
  color: var(--void-accent-light) !important;
}

/* Inline white backgrounds on sections */
[data-theme="dark"] [style*="background-color:rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"],
[data-theme="dark"] [style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--void-bg-card) !important;
}

/* Inline dark text overrides in dark mode */
[data-theme="dark"] [style*="--framer-text-color:rgb(0, 0, 0)"],
[data-theme="dark"] [style*="--framer-text-color: rgb(0, 0, 0)"] {
  --framer-text-color: var(--void-text-primary) !important;
}
[data-theme="dark"] [style*="--framer-text-color:rgb(19, 19, 19)"],
[data-theme="dark"] [style*="--framer-text-color:rgb(38, 38, 38)"],
[data-theme="dark"] [style*="--framer-text-color:rgb(131, 131, 131)"] {
  --framer-text-color: var(--void-text-secondary) !important;
}

/* Prevent FOUC - hide page initially when JS might not have run */