/* =======================================================
   DARK MODE MASTER FILE
   =======================================================

   Single source of truth for dark mode styles on the landing page.

   Supports TWO activation methods:
   1. @media (prefers-color-scheme: dark) - System preference
   2. [data-theme="dark"] - Manual toggle via button

   Design Philosophy:
   - Warm, earthy dark palette (not cold/gray)
   - WCAG AA compliant contrast ratios
   - Consistent with Ferni brand identity
   - Apple-level polish and attention to detail

   Color Palette (Dark Mode):
   - Background: var(--color-text-primary) (warm dark brown)
   - Elevated: var(--color-bg-dark-elevated) (slightly lighter)
   - Surface: var(--color-bg-dark-surface) (card surfaces)
   - Deep: var(--color-bg-dark) (for dramatic sections)

   Text Colors (all WCAG AA compliant on var(--color-text-primary)):
   - Primary: var(--color-text-inverse) (12.1:1 contrast)
   - Secondary: var(--color-bg-secondary) (9.8:1 contrast)
   - Muted: var(--color-text-muted) (7.5:1 contrast)
   - Dimmed: var(--color-text-dimmed) (5.9:1 contrast)

   ======================================================= */

/* =======================================================
   MANUAL TOGGLE SUPPORT - [data-theme="dark"]
   Duplicates all CSS variables for manual dark mode toggle
   ======================================================= */

[data-theme="dark"] {
  /* ===== Surface Colors ===== */
  --color-background: var(--color-text-primary);
  --color-background-elevated: var(--color-bg-dark-elevated);
  --color-background-surface: var(--color-bg-dark-surface);
  --color-background-deep: var(--color-bg-dark);

  /* ===== Legacy Variable Aliases (from story-brand.css) ===== */
  --color-bg-primary: var(--color-text-primary);
  --color-bg-secondary: var(--color-bg-dark-elevated);
  --color-paper-cream: var(--color-text-primary);
  --color-sand: var(--color-bg-dark-elevated);
  --color-background-subtle: var(--color-bg-dark-elevated);

  /* ===== Text Colors - WCAG AA Compliant ===== */
  --color-text-primary: var(--color-text-inverse);
  --color-text-secondary: var(--color-bg-secondary);
  --color-text-muted: var(--color-text-muted);
  --color-text-dimmed: var(--color-text-dimmed);

  /* ===== Accent Colors - Uses Ferni textOnDark for contrast ===== */
  --color-accent: var(--color-ferni-text, #a5c99a);
  --color-accent-hover: var(--color-ferni-light);
  --color-accent-light: rgba(165, 201, 154, 0.2);
  --color-highlight: var(--color-highlight);
  --color-highlight-glow: rgba(212, 178, 117, 0.3);

  /* ===== Border Colors ===== */
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-medium: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.25);

  /* ===== Shadow System - Deeper for dark mode ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

  /* ===== Ferni Glow ===== */
  --shadow-glow-ferni: 0 8px 32px rgba(90, 122, 82, 0.25);
  --shadow-glow-highlight: 0 8px 32px rgba(212, 178, 117, 0.2);

  /* ===== Glass Effect ===== */
  --glass-bg: rgba(44, 37, 32, 0.8);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* Base body styles for manual toggle - explicit colors */
[data-theme="dark"] body,
[data-theme="dark"] {
  background: #584840;
  color: #faf6f0;
}

/* Default headings for manual toggle - explicit light colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #faf6f0 !important;
}

/* Default links for manual toggle */
[data-theme="dark"] a {
  color: #d4a84a;
}

[data-theme="dark"] a:hover {
  color: #e0bc6a;
}

/* =======================================================
   PHASE 1: FOUNDATION - CSS Variables
   ======================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    /* ===== Surface Colors ===== */
    --color-background: var(--color-text-primary);
    --color-background-elevated: var(--color-bg-dark-elevated);
    --color-background-surface: var(--color-bg-dark-surface);
    --color-background-deep: var(--color-bg-dark);
    
    /* ===== Legacy Variable Aliases (from story-brand.css) ===== */
    --color-bg-primary: var(--color-text-primary);
    --color-bg-secondary: var(--color-bg-dark-elevated);
    --color-paper-cream: var(--color-text-primary);
    --color-sand: var(--color-bg-dark-elevated);
    --color-background-subtle: var(--color-bg-dark-elevated);
    
    /* ===== Text Colors - WCAG AA Compliant ===== */
    --color-text-primary: var(--color-text-inverse);
    --color-text-secondary: var(--color-bg-secondary);
    --color-text-muted: var(--color-text-muted);
    --color-text-dimmed: var(--color-text-dimmed);
    
    /* ===== Accent Colors - Uses Ferni textOnDark for contrast ===== */
    --color-accent: var(--color-ferni-text, #a5c99a);
    --color-accent-hover: var(--color-ferni-light);
    --color-accent-light: rgba(165, 201, 154, 0.2);
    --color-highlight: var(--color-highlight);
    --color-highlight-glow: rgba(212, 178, 117, 0.3);
    
    /* ===== Border Colors ===== */
    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border-medium: rgba(255, 255, 255, 0.15);
    --color-border-strong: rgba(255, 255, 255, 0.25);
    
    /* ===== Shadow System - Deeper for dark mode ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    
    /* ===== Ferni Glow ===== */
    --shadow-glow-ferni: 0 8px 32px rgba(90, 122, 82, 0.25);
    --shadow-glow-highlight: 0 8px 32px rgba(212, 178, 117, 0.2);
    
    /* ===== Glass Effect ===== */
    --glass-bg: rgba(44, 37, 32, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
  
  /* ===== Body Base - explicit colors ===== */
  body {
    background: #584840;
    color: #faf6f0;
  }
  
  /* ===== Default Headings - explicit light colors ===== */
  h1, h2, h3, h4, h5, h6 {
    color: #faf6f0 !important;
  }

  /* ===== Default Links ===== */
  a {
    color: #d4a84a;
  }

  a:hover {
    color: #e0bc6a;
  }
}

/* =======================================================
   PHASE 2: NAVIGATION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .nav {
    background: rgba(88, 72, 64, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(215, 185, 145, 0.12);
  }

  .nav.is-scrolled {
    background: rgba(88, 72, 64, 0.95);
    box-shadow: var(--shadow-md);
  }

  /* Logo text - explicit light color for dark mode */
  .nav__logo-text,
  .nav-logo,
  .logo-text {
    color: #faf6f0 !important;
  }

  /* Navigation links - explicit light colors */
  .nav__link,
  .nav-link {
    color: #f0ebe4 !important;
  }

  .nav__link:hover,
  .nav__link.is-active,
  .nav-link:hover,
  .nav-link.is-active {
    color: #faf6f0 !important;
  }

  .nav__cta {
    background: #d4a84a;
    color: white;
  }

  .nav__cta:hover {
    background: #e0bc6a;
    box-shadow: 0 8px 32px rgba(212, 168, 74, 0.25);
  }

  /* Nav phone link */
  .nav-phone {
    color: #f0ebe4 !important;
  }

  .nav-phone:hover {
    color: #faf6f0 !important;
  }

  /* Mobile menu button hamburger lines */
  .nav-menu-btn span {
    background: #faf6f0;
  }

  /* Mobile Menu */
  .mobile-menu {
    background: #584840;
  }

  .mobile-menu__header {
    border-bottom-color: rgba(215, 185, 145, 0.12);
  }

  .mobile-menu__close {
    color: #f0ebe4;
  }

  .mobile-menu__nav a,
  .mobile-link {
    color: #f0ebe4 !important;
    border-bottom-color: rgba(215, 185, 145, 0.12);
  }

  .mobile-menu__nav a:hover,
  .mobile-link:hover {
    color: #faf6f0 !important;
    background: #70605a;
  }
}

/* =======================================================
   PHASE 3: HERO SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .hero {
    background: linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-background-elevated) 100%
    );
  }
  
  /* Background effects - more subtle in dark */
  .hero__bg-gradient {
    background: radial-gradient(
      ellipse 80% 50% at 50% -20%,
      rgba(90, 122, 82, 0.15),
      transparent
    );
  }
  
  .hero__bg-orb {
    opacity: 0.25;
  }
  
  /* Ferni Avatar */
  .hero-ferni__glow {
    background: radial-gradient(
      circle,
      rgba(90, 122, 82, 0.4) 0%,
      transparent 70%
    );
    opacity: 0.8;
  }
  
  .hero-ferni__ring {
    border-color: rgba(90, 122, 82, 0.3);
  }
  
  .hero-ferni__orb {
    background: var(--color-accent);
    box-shadow: var(--shadow-glow-ferni);
  }
  
  .hero-ferni__text {
    color: white;
  }
  
  /* Hero Content - explicit light colors for dark mode */
  .hero__tagline {
    color: #d4a84a;
  }

  .hero__headline {
    color: #faf6f0 !important;
  }

  .hero__headline-accent {
    color: #d4a84a;
  }

  .hero__subhead {
    color: #f0ebe4;
  }

  .hero__phone {
    color: #e8e2da;
  }

  .hero__phone a {
    color: #d4a84a;
  }

  .hero__phone a:hover {
    color: #e0bc6a;
  }

  /* Scroll Indicator */
  .scroll-indicator {
    color: #e8e2da;
  }

  .scroll-indicator__mouse {
    border-color: #e8e2da;
  }

  .scroll-indicator__mouse::before {
    background: #e8e2da;
  }
}

/* =======================================================
   PHASE 4: SECTION HEADERS (Universal)
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .section__eyebrow {
    color: #d4a84a;
  }

  .section__title {
    color: #faf6f0 !important;
  }

  .section__subtitle {
    color: #f0ebe4;
  }

  /* Alternate section styling */
  .section--alt {
    background: #70605a;
  }
}

/* =======================================================
   PHASE 5: TWO-AM SECTION (Extra Dark for Drama)
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .two-am {
    /* Explicit dark gradient - var(--color-background-deep) doesn't exist in tokens */
    background: linear-gradient(180deg, #1a1613 0%, #2c2520 100%);
  }

  .two-am__darkness {
    background: transparent;
  }

  .two-am__time {
    /* Bright ethereal time display */
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  }

  .two-am__thought {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .two-am__quote {
    /* Light cream text for readability on dark background */
    color: #f5f0e6;
    font-style: italic;
  }

  .two-am__limit {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .two-am__limit-who {
    /* Visible light text */
    color: rgba(255, 255, 255, 0.8);
  }

  .two-am__limit-status {
    /* More visible status text */
    color: rgba(255, 255, 255, 0.7);
  }
  
  /* Ferni Response - Warm Glow */
  .two-am__response {
    background: radial-gradient(
      ellipse 100% 80% at 50% 100%,
      rgba(90, 122, 82, 0.15) 0%,
      transparent 70%
    );
  }
  
  .two-am__avatar-glow {
    background: radial-gradient(
      circle,
      rgba(90, 122, 82, 0.5) 0%,
      transparent 70%
    );
  }
  
  .two-am__avatar-orb {
    background: var(--color-accent);
    box-shadow: var(--shadow-glow-ferni);
    color: white;
  }
  
  .two-am__bubble {
    background: var(--color-background-elevated);
    border-color: var(--color-border-medium);
  }
  
  .two-am__ferni-says {
    color: var(--color-text-primary);
  }
  
  .two-am__ferni-sub {
    color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 5B: TWO-AM SECTION (Class-based dark mode toggle)
   These rules work with .theme--dark class regardless of OS setting
   ======================================================= */

.theme--dark .two-am {
  /* Explicit dark gradient - ensures visibility regardless of OS preference */
  background: linear-gradient(180deg, #1a1613 0%, #2c2520 100%);
}

.theme--dark .two-am__darkness {
  background: transparent;
}

.theme--dark .two-am__time {
  /* Bright ethereal time display */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.theme--dark .two-am__thought {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme--dark .two-am__quote {
  /* Light cream text for readability on dark background */
  color: #f5f0e6;
  font-style: italic;
}

.theme--dark .two-am__limit {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme--dark .two-am__limit-who {
  /* Visible light text */
  color: rgba(255, 255, 255, 0.8);
}

.theme--dark .two-am__limit-status {
  /* More visible status text */
  color: rgba(255, 255, 255, 0.7);
}

.theme--dark .two-am__response {
  background: radial-gradient(
    ellipse 100% 80% at 50% 100%,
    rgba(90, 122, 82, 0.15) 0%,
    transparent 70%
  );
}

.theme--dark .two-am__avatar-glow {
  background: radial-gradient(
    circle,
    rgba(90, 122, 82, 0.5) 0%,
    transparent 70%
  );
}

.theme--dark .two-am__avatar-orb {
  background: var(--color-accent);
  box-shadow: 0 0 20px rgba(90, 122, 82, 0.5);
  color: white;
}

.theme--dark .two-am__bubble {
  background: rgba(44, 37, 32, 0.9);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme--dark .two-am__ferni-says {
  color: #f5f0e6;
}

.theme--dark .two-am__ferni-sub {
  color: var(--color-accent);
}

/* =======================================================
   PHASE 6: STATS BAR
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .stats-bar {
    background: var(--color-background-elevated);
    border-top: 1px solid var(--color-border-subtle);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  
  .stat__value {
    color: var(--color-text-primary);
  }
  
  .stat__label {
    color: var(--color-text-muted);
  }
  
  .stat--gardeners .stat__value {
    color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 7: SHOWCASE SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .showcase {
    background: var(--color-background);
  }
  
  .showcase__eyebrow {
    color: var(--color-highlight);
  }
  
  .showcase__title {
    color: var(--color-text-primary);
  }
  
  .showcase__description {
    color: var(--color-text-secondary);
  }
  
  .showcase__features {
    color: var(--color-text-secondary);
  }
  
  .showcase__feature svg {
    color: var(--color-accent);
  }
  
  /* Phone Mockup */
  .showcase__phone {
    background: var(--color-background-deep);
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-xl);
  }
  
  .showcase__phone-notch {
    background: var(--color-background-deep);
  }
  
  .showcase__phone-screen {
    background: var(--color-background-elevated);
  }
  
  .showcase__app {
    background: var(--color-background);
  }
  
  .showcase__app-header {
    background: var(--color-background-elevated);
    border-bottom-color: var(--color-border-subtle);
  }
  
  .showcase__app-name {
    color: var(--color-text-primary);
  }
  
  .showcase__app-status {
    color: var(--color-accent);
  }
  
  .showcase__app-bubble--user {
    background: var(--color-accent);
    color: white;
  }
  
  .showcase__app-bubble--ai {
    background: var(--color-background-elevated);
    color: var(--color-text-secondary);
  }
  
  .showcase__app-bubble--insight .bubble-insight {
    color: var(--color-highlight);
  }
  
  .showcase__app-input {
    background: var(--color-background-elevated);
    border-top-color: var(--color-border-subtle);
    color: var(--color-text-muted);
  }
  
  .showcase__app-input-mic {
    color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 8: MEMORY STORY SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .memory-story {
    background: linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-background-elevated) 50%,
      var(--color-background) 100%
    );
  }
  
  .memory-story__eyebrow {
    color: var(--color-highlight);
  }
  
  .memory-story__headline {
    color: var(--color-text-primary);
  }
  
  .memory-story__subhead {
    color: var(--color-text-secondary);
  }
  
  /* Timeline */
  .memory-story__chapter {
    border-left-color: var(--color-border-medium);
  }
  
  .memory-story__marker {
    background: var(--color-background);
  }
  
  .memory-story__marker::before {
    background: var(--color-border-medium);
  }
  
  .memory-story__marker--now::before {
    background: var(--color-accent);
  }
  
  .memory-story__time {
    color: var(--color-text-muted);
  }
  
  /* Memory Cards */
  .memory-story__card {
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-md);
  }
  
  .memory-story__quote {
    color: var(--color-text-secondary);
  }
  
  /* Emotion Tags */
  .memory-story__tag {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
  }
  
  .memory-story__tag--anxious {
    background: rgba(196, 133, 106, 0.2);
    color: var(--color-maya);
  }
  
  .memory-story__tag--scared {
    background: rgba(184, 149, 106, 0.2);
    color: var(--color-nayan);
  }
  
  .memory-story__tag--distracted {
    background: rgba(90, 107, 138, 0.2);
    color: var(--color-alex);
  }
  
  .memory-story__tag--guilty {
    background: rgba(166, 122, 106, 0.2);
    color: var(--color-maya);
  }
  
  .memory-story__tag--relieved {
    background: rgba(90, 122, 82, 0.2);
    color: var(--color-ferni);
  }
  
  /* Ferni Response Card - Special Treatment */
  .memory-story__card--ferni {
    background: linear-gradient(
      135deg,
      rgba(90, 122, 82, 0.15) 0%,
      var(--color-background-elevated) 100%
    );
    border-color: rgba(90, 122, 82, 0.3);
    box-shadow: var(--shadow-glow-ferni);
  }
  
  .memory-story__ferni-header {
    color: var(--color-text-primary);
  }
  
  .memory-story__avatar {
    background: var(--color-accent);
    color: white;
  }
  
  .memory-story__name {
    color: var(--color-accent);
  }
  
  .memory-story__response {
    color: var(--color-text-secondary);
  }
  
  /* Memory Dashboard */
  .memory-dashboard {
    background: var(--color-background-surface);
    border: 1px solid var(--color-border-subtle);
  }
  
  .memory-dashboard__header {
    border-bottom-color: var(--color-border-subtle);
  }
  
  .memory-dashboard__eyebrow {
    color: var(--color-highlight);
  }
  
  .memory-dashboard__title {
    color: var(--color-text-primary);
  }
  
  .memory-dashboard__stat-value {
    color: var(--color-text-primary);
  }
  
  .memory-dashboard__stat-label {
    color: var(--color-text-muted);
  }
  
  .memory-dashboard__stat-divider {
    background: var(--color-border-subtle);
  }
  
  .memory-dashboard__stat--highlight .memory-dashboard__stat-value {
    color: var(--color-accent);
  }
  
  /* Chart */
  .memory-chart {
    background: var(--color-background-elevated);
    border: 1px solid var(--color-border-subtle);
  }
  
  .memory-chart__title {
    color: var(--color-text-primary);
  }
  
  .memory-chart__grid line {
    stroke: var(--color-border-subtle);
  }
  
  .memory-chart__y-axis span {
    color: var(--color-text-muted);
  }
  
  .memory-chart__x-labels text {
    fill: var(--color-text-muted);
  }
  
  .memory-chart__change--positive {
    color: var(--color-accent);
  }
  
  .memory-chart__change-label {
    color: var(--color-text-muted);
  }
  
  .memory-chart__insight-label {
    color: var(--color-text-muted);
  }
  
  /* Pattern Cards */
  .memory-dashboard__pattern {
    background: var(--color-background);
    border-color: var(--color-border-subtle);
  }
  
  .memory-dashboard__pattern-text strong {
    color: var(--color-text-primary);
  }
  
  .memory-dashboard__pattern-text span {
    color: var(--color-text-muted);
  }
  
  /* Connection Web */
  .memory-dashboard__web {
    opacity: 0.8;
  }
  
  .memory-dashboard__web-label {
    color: var(--color-text-muted);
  }
  
  .memory-dashboard__footer {
    border-top-color: var(--color-border-subtle);
    color: var(--color-text-secondary);
  }
  
  .memory-dashboard__footer em {
    color: var(--color-highlight);
  }
}

/* =======================================================
   PHASE 9: STORY SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .story {
    background: var(--color-background);
  }
  
  .story__eyebrow {
    color: var(--color-highlight);
  }
  
  .story__headline {
    color: var(--color-text-primary);
  }
  
  .story__headline em {
    color: var(--color-accent);
    font-style: normal;
  }
  
  .story__subtext {
    color: var(--color-text-secondary);
  }
  
  .story__subtext br + br {
    display: block;
    content: "";
  }
  
  .story__punchline {
    color: var(--color-accent);
  }
  
  .story__aside {
    color: var(--color-text-muted);
    border-left-color: var(--color-border-medium);
  }
  
  .story__link {
    color: var(--color-highlight);
  }
  
  .story__link:hover {
    color: var(--color-accent-hover);
  }
  
  .story__closer {
    color: var(--color-text-primary);
  }
  
  .story__signature {
    color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 10: GARDEN SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .garden,
  .garden--story {
    background: linear-gradient(
      180deg,
      var(--color-background-deep) 0%,
      rgba(90, 122, 82, 0.1) 50%,
      var(--color-background-elevated) 100%
    );
  }
  
  .garden__eyebrow {
    color: var(--color-highlight);
  }
  
  .garden__headline {
    color: var(--color-text-primary);
  }
  
  .garden__lead {
    color: var(--color-text-secondary);
  }
  
  .garden__card {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
    box-shadow: var(--shadow-md);
  }
  
  .garden__card:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .garden__card-icon {
    color: var(--color-accent);
  }
  
  .garden__card-title {
    color: var(--color-text-primary);
  }
  
  .garden__card-text {
    color: var(--color-text-secondary);
  }
  
  .garden__promise {
    color: var(--color-text-primary);
  }
  
  .btn--garden {
    background: var(--color-accent);
    color: white;
  }
  
  .btn--garden:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--shadow-glow-ferni);
  }
}

/* =======================================================
   PHASE 11: USE CASES SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .use-cases {
    background: var(--color-background-elevated);
  }
  
  .use-case {
    background: var(--color-background-surface);
    border-color: var(--color-border-subtle);
  }
  
  .use-case:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .use-case__icon {
    color: var(--color-accent);
  }
  
  .use-case__title {
    color: var(--color-text-primary);
  }
  
  .use-case__description {
    color: var(--color-text-secondary);
  }
  
  .use-case__example {
    background: var(--color-background);
    color: var(--color-text-muted);
    border-left-color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 12: QUIZ SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .quiz-section {
    background: var(--color-background);
  }
  
  .persona-quiz {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .quiz__step {
    color: var(--color-text-muted);
  }
  
  .quiz__content h3 {
    color: var(--color-text-primary);
  }
  
  .quiz__content button {
    background: var(--color-background-surface);
    color: var(--color-text-secondary);
    border-color: var(--color-border-subtle);
  }
  
  .quiz__content button:hover {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 13: TEAM SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .team-card {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .team-card:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .team-card__name {
    color: var(--color-text-primary);
  }
  
  .team-card__role {
    color: var(--color-text-muted);
  }
  
  .team-card__quote {
    color: var(--color-text-secondary);
  }
  
  .team-card__trait {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-muted);
  }
  
  /* Persona Avatar Colors - Use textOnDark tokens from design-tokens.css */
  .persona-avatar--ferni .persona-avatar__orb {
    background: var(--color-ferni-text);
  }

  .persona-avatar--peter .persona-avatar__orb {
    background: var(--color-peter-text);
  }

  .persona-avatar--alex .persona-avatar__orb {
    background: var(--color-alex-text);
  }

  .persona-avatar--maya .persona-avatar__orb {
    background: var(--color-maya-text);
  }

  .persona-avatar--jordan .persona-avatar__orb {
    background: var(--color-jordan-text);
  }

  .persona-avatar--nayan .persona-avatar__orb {
    background: var(--color-nayan-text);
  }
}

/* =======================================================
   PHASE 14: JOURNEY SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .journey {
    background: var(--color-background);
  }
  
  /* Depth Visualization */
  .journey__depth-scale span {
    color: var(--color-text-muted);
  }
  
  .journey__depth-bar {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .journey__depth-bar-fill {
    background: linear-gradient(
      180deg,
      var(--color-accent) 0%,
      rgba(90, 122, 82, 0.4) 100%
    );
  }
  
  .journey__depth-bar-label {
    color: var(--color-text-muted);
  }
  
  .journey__depth-bar-content strong {
    color: var(--color-text-primary);
  }
  
  .journey__depth-bar-content p {
    color: var(--color-text-secondary);
  }
  
  /* Timeline */
  .journey__stage {
    border-left-color: var(--color-border-medium);
  }
  
  .journey__stage-dot {
    background: var(--color-background);
    border-color: var(--color-border-medium);
  }
  
  .journey__stage--active .journey__stage-dot {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }
  
  .journey__stage-line {
    background: var(--color-border-medium);
  }
  
  .journey__stage-title {
    color: var(--color-text-primary);
  }
  
  .journey__stage-badge {
    background: var(--color-background-elevated);
    color: var(--color-text-muted);
  }
  
  .journey__stage-badge--premium {
    background: var(--color-highlight);
    color: var(--color-background);
  }
  
  .journey__stage-description {
    color: var(--color-text-secondary);
  }
  
  .journey__stage-unlock span {
    color: var(--color-text-muted);
  }
  
  .journey__stage-what-happens {
    color: var(--color-text-muted);
    border-top-color: var(--color-border-subtle);
  }
  
  .journey__stage-what-happens strong {
    color: var(--color-text-secondary);
  }
  
  /* Avatars - Use textOnDark tokens from design-tokens.css */
  .journey__avatar {
    border-color: var(--color-border-medium);
  }

  .journey__avatar--ferni {
    background: var(--color-ferni-text);
  }

  .journey__avatar--maya {
    background: var(--color-maya-text);
  }

  .journey__avatar--peter {
    background: var(--color-peter-text);
  }

  .journey__avatar--alex {
    background: var(--color-alex-text);
  }

  .journey__avatar--jordan {
    background: var(--color-jordan-text);
  }

  .journey__avatar--nayan {
    background: var(--color-nayan-text);
  }
  
  /* Note */
  .journey__note {
    background: var(--color-background-elevated);
    color: var(--color-text-muted);
  }
  
  .journey__note svg {
    color: var(--color-highlight);
  }
}

/* =======================================================
   PHASE 15: WAYS TO CONNECT SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .ways-to-connect {
    background: var(--color-background-elevated);
  }
  
  .connect-option {
    background: var(--color-background-surface);
    border-color: var(--color-border-subtle);
  }
  
  .connect-option:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .connect-option__icon {
    color: var(--color-accent);
  }
  
  .connect-option__title {
    color: var(--color-text-primary);
  }
  
  .connect-option__detail {
    color: var(--color-highlight);
  }
  
  .connect-option__desc {
    color: var(--color-text-muted);
  }
}

/* =======================================================
   PHASE 16: SUPERPOWERS SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .superpowers {
    background: var(--color-background);
  }
  
  .superpowers__tabs {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .superpowers__tab {
    background: transparent;
    color: var(--color-text-muted);
  }
  
  .superpowers__tab:hover {
    color: var(--color-text-secondary);
    background: rgba(255, 255, 255, 0.05);
  }
  
  .superpowers__tab.is-active {
    background: var(--color-accent);
    color: white;
  }
  
  .superpowers__tab-icon {
    color: inherit;
  }
  
  .superpowers__demo {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .superpowers__demo-title {
    color: var(--color-text-primary);
  }
  
  .superpowers__demo-description {
    color: var(--color-text-secondary);
  }
  
  .superpowers__demo-why {
    background: var(--color-background);
    border-color: var(--color-border-subtle);
    color: var(--color-text-muted);
  }
  
  .superpowers__demo-why strong {
    color: var(--color-text-secondary);
  }
  
  /* Demo Chat */
  .demo-chat {
    background: var(--color-background-surface);
    border-color: var(--color-border-subtle);
  }
  
  .demo-chat__message--user {
    background: var(--color-accent);
    color: white;
  }
  
  .demo-chat__message--ai {
    background: var(--color-background-elevated);
    color: var(--color-text-secondary);
  }
  
  .demo-chat__insight {
    color: var(--color-highlight);
  }
  
  .demo-chat__timestamp {
    color: var(--color-text-dimmed);
  }
  
  .demo-chat__message--silence {
    color: var(--color-text-dimmed);
    font-style: italic;
  }
  
  .demo-chat__message--presence {
    border-left-color: var(--color-accent);
  }
}

/* =======================================================
   PHASE 17: HARDEST MOMENTS SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .hardest-moments {
    background: var(--color-background);
  }
  
  .moment-card {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .moment-card:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .moment-card__icon {
    color: var(--color-accent);
  }
  
  .moment-card__title {
    color: var(--color-text-primary);
  }
  
  .moment-card__superpower {
    color: var(--color-highlight);
  }
  
  .moment-card__description {
    color: var(--color-text-secondary);
  }
  
  .moment-card__voice {
    color: var(--color-text-muted);
    border-left-color: var(--color-accent);
    font-style: italic;
  }
}

/* =======================================================
   PHASE 18: FEATURES SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .features {
    background: var(--color-background-elevated);
  }
  
  .feature {
    background: var(--color-background-surface);
    border-color: var(--color-border-subtle);
  }
  
  .feature:hover {
    border-color: var(--color-border-medium);
  }
  
  .feature__icon {
    color: var(--color-accent);
  }
  
  .feature__title {
    color: var(--color-text-primary);
  }
  
  .feature__description {
    color: var(--color-text-secondary);
  }
}

/* =======================================================
   PHASE 19: THE GAPS SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .the-gaps {
    background: var(--color-background-deep);
  }
  
  .gaps__eyebrow {
    color: var(--color-highlight);
  }
  
  .gaps__headline {
    color: var(--color-text-primary);
  }
  
  .gaps__moment {
    border-bottom-color: var(--color-border-subtle);
  }
  
  .gaps__scenario {
    color: var(--color-text-muted);
  }
  
  .gaps__response {
    color: var(--color-accent);
  }
  
  .gaps__closing {
    color: var(--color-text-secondary);
  }
}

/* =======================================================
   PHASE 20: SECURITY SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .security {
    background: var(--color-background);
  }
  
  .security-card {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }
  
  .security-card:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }
  
  .security-card__icon {
    color: var(--color-accent);
  }
  
  .security-card__title {
    color: var(--color-text-primary);
  }
  
  .security-card__description {
    color: var(--color-text-secondary);
  }
}

/* =======================================================
   PHASE 21: FAQ SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .faq,
  .section-faq {
    background: var(--color-background);
  }
  
  .faq-item {
    border-bottom-color: var(--color-border-subtle);
  }
  
  .faq-item__question,
  .faq-question {
    color: var(--color-text-primary);
  }
  
  .faq-item__question::marker {
    color: var(--color-accent);
  }
  
  .faq-item[open] .faq-item__question {
    color: var(--color-accent);
  }
  
  .faq-item__answer,
  .faq-answer {
    color: var(--color-text-secondary);
  }
  
  .faq-item__answer a {
    color: var(--color-highlight);
  }
}

/* =======================================================
   PHASE 22: FINAL CTA SECTION
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .final-cta {
    background: linear-gradient(
      180deg,
      var(--color-background) 0%,
      var(--color-background-deep) 100%
    );
  }
  
  .final-cta__avatar-glow {
    background: radial-gradient(
      circle,
      rgba(90, 122, 82, 0.4) 0%,
      transparent 70%
    );
  }
  
  .final-cta__avatar-orb {
    background: var(--color-accent);
    box-shadow: var(--shadow-glow-ferni);
    color: white;
  }
  
  .final-cta__headline {
    color: var(--color-text-primary);
  }
  
  .final-cta__subhead {
    color: var(--color-text-secondary);
  }
  
  .final-cta__phone {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-glow-ferni);
  }
  
  .final-cta__phone:hover {
    background: var(--color-accent-hover);
  }
  
  .final-cta__phone-number {
    color: white;
  }
  
  .final-cta__phone-label {
    color: rgba(255, 255, 255, 0.8);
  }
  
  .final-cta__divider {
    color: var(--color-text-muted);
  }
  
  .final-cta__divider::before,
  .final-cta__divider::after {
    background: var(--color-border-subtle);
  }
}

/* =======================================================
   PHASE 23: FOOTER
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .footer {
    background: var(--color-background-deep);
    border-top-color: var(--color-border-subtle);
  }
  
  .footer--bold {
    background: var(--color-background-deep);
  }
  
  .footer__headline {
    color: var(--color-text-primary);
  }
  
  .footer__subline {
    color: var(--color-text-secondary);
  }
  
  .footer__cta {
    background: var(--color-accent);
    color: white;
  }
  
  .footer__cta:hover {
    background: var(--color-accent-hover);
  }
  
  .footer__hero {
    border-bottom-color: var(--color-border-subtle);
  }
  
  .footer__nav-title {
    color: var(--color-text-muted);
  }
  
  .footer__nav-group a {
    color: var(--color-text-secondary);
  }
  
  .footer__nav-group a:hover {
    color: var(--color-text-primary);
  }
  
  .footer__logo-text {
    color: var(--color-text-primary);
  }
  
  .footer__motto {
    color: var(--color-text-muted);
  }
  
  .footer__legal {
    color: var(--color-text-dimmed);
    border-top-color: var(--color-border-subtle);
  }
  
  .footer__legal a {
    color: var(--color-text-muted);
  }
  
  .footer__legal a:hover {
    color: var(--color-text-secondary);
  }
}

/* =======================================================
   PHASE 24: MOBILE CTA BAR
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .mobile-cta {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
  }
  
  .mobile-cta .btn--secondary {
    background: var(--color-background-elevated);
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
  }
  
  .mobile-cta .btn--secondary:hover {
    background: var(--color-background-surface);
  }
}

/* =======================================================
   PHASE 25: COOKIE BANNER
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .cookie-banner {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
    box-shadow: var(--shadow-lg);
  }
  
  .cookie-banner p {
    color: var(--color-text-secondary);
  }
  
  .cookie-banner a {
    color: var(--color-highlight);
  }
  
  .cookie-banner .btn--ghost {
    color: var(--color-text-muted);
    border-color: var(--color-border-medium);
  }
  
  .cookie-banner .btn--ghost:hover {
    background: var(--color-background-surface);
  }
}

/* =======================================================
   PHASE 26: BUTTONS (Global)
   ======================================================= */

@media (prefers-color-scheme: dark) {
  .btn--primary {
    background: var(--color-accent);
    color: white;
  }
  
  .btn--primary:hover {
    background: var(--color-accent-hover);
    box-shadow: var(--shadow-glow-ferni);
  }
  
  .btn--secondary {
    background: var(--color-background-elevated);
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
  }
  
  .btn--secondary:hover {
    background: var(--color-background-surface);
    color: var(--color-text-primary);
  }
  
  .btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
  }
  
  .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text-primary);
  }
}

/* =======================================================
   PHASE 27: FOCUS STATES (Accessibility)
   ======================================================= */

@media (prefers-color-scheme: dark) {
  /* Focus ring - visible on dark backgrounds */
  *:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
  }
  
  /* Button focus */
  .btn:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--color-highlight-glow);
  }
  
  /* Link focus */
  a:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
  }
  
  /* Input focus */
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 0;
    border-color: var(--color-accent);
  }
  
  /* Card focus */
  .card:focus-visible,
  .team-card:focus-visible,
  .faq-item:focus-visible {
    outline: 2px solid var(--color-highlight);
    outline-offset: 2px;
  }
}

/* =======================================================
   PHASE 28: HIGH CONTRAST MODE
   ======================================================= */

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --color-text-primary: var(--color-text-inverse);
    --color-text-secondary: var(--color-text-inverse);
    --color-text-muted: var(--color-text-secondary);
    --color-border-subtle: rgba(255, 255, 255, 0.3);
    --color-border-medium: rgba(255, 255, 255, 0.5);
    --color-accent: var(--color-ferni);
  }
}

/* =======================================================
   PHASE 29: REDUCED MOTION
   ======================================================= */

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

/* =======================================================
   PHASE 30: PRINT STYLES
   ======================================================= */

@media print {
  /* Override dark mode for printing */
  body {
    background: white !important;
    color: black !important;
  }

  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
}

/* =======================================================
   MANUAL TOGGLE COMPONENT OVERRIDES - [data-theme="dark"]
   Critical sections for manual dark mode toggle support
   ======================================================= */

/* ----- Navigation ----- */
[data-theme="dark"] .nav {
  background: rgba(88, 72, 64, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(215, 185, 145, 0.12);
}

[data-theme="dark"] .nav.is-scrolled {
  background: rgba(88, 72, 64, 0.95);
  box-shadow: var(--shadow-md);
}

/* Logo text - explicit light color for dark mode */
[data-theme="dark"] .nav__logo-text,
[data-theme="dark"] .nav-logo,
[data-theme="dark"] .logo-text {
  color: #faf6f0 !important;
}

/* Navigation links - explicit light colors */
[data-theme="dark"] .nav__link,
[data-theme="dark"] .nav-link {
  color: #f0ebe4 !important;
}

[data-theme="dark"] .nav__link:hover,
[data-theme="dark"] .nav__link.is-active,
[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.is-active {
  color: #faf6f0 !important;
}

[data-theme="dark"] .nav__cta {
  background: #d4a84a;
  color: white;
}

[data-theme="dark"] .nav__cta:hover {
  background: #e0bc6a;
  box-shadow: 0 8px 32px rgba(212, 168, 74, 0.25);
}

/* Nav phone link */
[data-theme="dark"] .nav-phone {
  color: #f0ebe4 !important;
}

[data-theme="dark"] .nav-phone:hover {
  color: #faf6f0 !important;
}

/* Mobile menu button hamburger lines */
[data-theme="dark"] .nav-menu-btn span {
  background: #faf6f0;
}

[data-theme="dark"] .mobile-menu {
  background: #584840;
}

[data-theme="dark"] .mobile-menu__header {
  border-bottom-color: rgba(215, 185, 145, 0.12);
}

[data-theme="dark"] .mobile-menu__close {
  color: #f0ebe4;
}

[data-theme="dark"] .mobile-menu__nav a,
[data-theme="dark"] .mobile-link {
  color: #f0ebe4 !important;
  border-bottom-color: rgba(215, 185, 145, 0.12);
}

[data-theme="dark"] .mobile-menu__nav a:hover,
[data-theme="dark"] .mobile-link:hover {
  color: #faf6f0 !important;
  background: #70605a;
}

/* ----- Hero Section ----- */
[data-theme="dark"] .hero {
  background: linear-gradient(
    180deg,
    var(--color-background) 0%,
    var(--color-background-elevated) 100%
  );
}

[data-theme="dark"] .hero__bg-gradient {
  background: radial-gradient(
    ellipse 80% 50% at 50% -20%,
    rgba(90, 122, 82, 0.15),
    transparent
  );
}

[data-theme="dark"] .hero__bg-orb {
  opacity: 0.25;
}

[data-theme="dark"] .hero__tagline {
  color: #d4a84a;
}

[data-theme="dark"] .hero__headline {
  color: #faf6f0 !important;
}

[data-theme="dark"] .hero__headline-accent {
  color: #d4a84a;
}

[data-theme="dark"] .hero__subhead {
  color: #f0ebe4;
}

[data-theme="dark"] .hero__badge {
  color: #e8e2da;
}

[data-theme="dark"] .hero__phone {
  color: #e8e2da;
}

[data-theme="dark"] .hero__phone a {
  color: #d4a84a;
}

[data-theme="dark"] .hero__phone a:hover {
  color: #e0bc6a;
}

[data-theme="dark"] .scroll-indicator {
  color: #e8e2da;
}

[data-theme="dark"] .scroll-indicator__mouse {
  border-color: #e8e2da;
}

[data-theme="dark"] .scroll-indicator__mouse::before {
  background: #e8e2da;
}

/* ----- Stats Bar ----- */
[data-theme="dark"] .stats-bar {
  background: var(--color-background-elevated);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

[data-theme="dark"] .stat__value {
  color: var(--color-text-primary);
}

[data-theme="dark"] .stat__label {
  color: var(--color-text-muted);
}

/* ----- Showcase Section ----- */
[data-theme="dark"] .showcase {
  background: var(--color-background);
}

[data-theme="dark"] .showcase__eyebrow {
  color: var(--color-highlight);
}

[data-theme="dark"] .showcase__title {
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .showcase__feature svg {
  color: var(--color-accent);
}

[data-theme="dark"] .showcase__phone {
  background: var(--color-background-deep);
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .showcase__app {
  background: var(--color-background);
}

[data-theme="dark"] .showcase__app-header {
  background: var(--color-background-elevated);
  border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .showcase__app-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .showcase__app-bubble--user {
  background: var(--color-accent);
  color: white;
}

[data-theme="dark"] .showcase__app-bubble--ai {
  background: var(--color-background-elevated);
  color: var(--color-text-secondary);
}

/* ----- Section Headers (Universal) ----- */
[data-theme="dark"] .section__eyebrow {
  color: #d4a84a;
}

[data-theme="dark"] .section__title {
  color: #faf6f0 !important;
}

[data-theme="dark"] .section__subtitle {
  color: #f0ebe4;
}

[data-theme="dark"] .section--alt {
  background: #70605a;
}

/* ----- Team Cards ----- */
[data-theme="dark"] .team-card {
  background: var(--color-background-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .team-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .team-card__name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .team-card__role {
  color: var(--color-text-muted);
}

[data-theme="dark"] .team-card__quote {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .team-card__trait {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}

/* ----- Use Cases ----- */
[data-theme="dark"] .use-cases {
  background: var(--color-background-elevated);
}

[data-theme="dark"] .use-case {
  background: var(--color-background-surface);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .use-case:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .use-case__icon {
  color: var(--color-accent);
}

[data-theme="dark"] .use-case__title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .use-case__description {
  color: var(--color-text-secondary);
}

/* ----- Footer ----- */
[data-theme="dark"] .footer {
  background: var(--color-background-deep);
  border-top-color: var(--color-border-subtle);
}

[data-theme="dark"] .footer__headline {
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .footer__cta {
  background: var(--color-accent);
  color: white;
}

[data-theme="dark"] .footer__nav-title {
  color: var(--color-text-muted);
}

[data-theme="dark"] .footer__nav-group a {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .footer__nav-group a:hover {
  color: var(--color-text-primary);
}

[data-theme="dark"] .footer__logo-text {
  color: var(--color-text-primary);
}

[data-theme="dark"] .footer__legal {
  color: var(--color-text-dimmed);
  border-top-color: var(--color-border-subtle);
}

/* ----- Buttons (Global) ----- */
[data-theme="dark"] .btn--primary {
  background: var(--color-accent);
  color: white;
}

[data-theme="dark"] .btn--primary:hover {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-glow-ferni);
}

[data-theme="dark"] .btn--secondary {
  background: var(--color-background-elevated);
  color: var(--color-text-secondary);
  border-color: var(--color-border-medium);
}

[data-theme="dark"] .btn--secondary:hover {
  background: var(--color-background-surface);
  color: var(--color-text-primary);
}

[data-theme="dark"] .btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-medium);
}

[data-theme="dark"] .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

/* ----- Two-AM Section ----- */
[data-theme="dark"] .two-am {
  background: var(--color-background-deep);
}

[data-theme="dark"] .two-am__time {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .two-am__thought {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .two-am__quote {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .two-am__limit-who {
  color: var(--color-text-muted);
}

[data-theme="dark"] .two-am__limit-status {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="dark"] .two-am__avatar-orb {
  background: var(--color-accent);
  box-shadow: var(--shadow-glow-ferni);
  color: white;
}

[data-theme="dark"] .two-am__bubble {
  background: var(--color-background-elevated);
  border-color: var(--color-border-medium);
}

[data-theme="dark"] .two-am__ferni-says {
  color: var(--color-text-primary);
}

[data-theme="dark"] .two-am__ferni-sub {
  color: var(--color-accent);
}

/* ----- Memory Section ----- */
[data-theme="dark"] .memory-demo {
  background: var(--color-background);
}

[data-theme="dark"] .memory-demo__card {
  background: var(--color-background-elevated);
  border: 1px solid var(--color-border-subtle);
}

[data-theme="dark"] .memory-demo__date {
  color: var(--color-text-muted);
}

[data-theme="dark"] .memory-demo__text {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .memory-demo__card--ferni {
  background: linear-gradient(
    135deg,
    rgba(90, 122, 82, 0.15) 0%,
    var(--color-background-elevated) 100%
  );
  border-color: rgba(90, 122, 82, 0.3);
}

/* ----- Story Section ----- */
[data-theme="dark"] .story {
  background: var(--color-background);
}

[data-theme="dark"] .story__card {
  background: var(--color-background-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .story__card-title {
  color: var(--color-text-primary);
}

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

[data-theme="dark"] .story__card-highlight {
  color: var(--color-accent);
}

/* ----- FAQ Section ----- */
[data-theme="dark"] .faq,
[data-theme="dark"] .section-faq {
  background: var(--color-background);
}

[data-theme="dark"] .faq-item {
  border-bottom-color: var(--color-border-subtle);
}

[data-theme="dark"] .faq-item__question,
[data-theme="dark"] .faq-question {
  color: var(--color-text-primary);
}

[data-theme="dark"] .faq-item[open] .faq-item__question {
  color: var(--color-accent);
}

[data-theme="dark"] .faq-item__answer,
[data-theme="dark"] .faq-answer {
  color: var(--color-text-secondary);
}

/* ----- Final CTA ----- */
[data-theme="dark"] .final-cta {
  background: linear-gradient(
    180deg,
    var(--color-background) 0%,
    var(--color-background-deep) 100%
  );
}

[data-theme="dark"] .final-cta__avatar-orb {
  background: var(--color-accent);
  box-shadow: var(--shadow-glow-ferni);
  color: white;
}

[data-theme="dark"] .final-cta__headline {
  color: var(--color-text-primary);
}

[data-theme="dark"] .final-cta__subhead {
  color: var(--color-text-secondary);
}

/* ----- Focus States (Accessibility) ----- */
[data-theme="dark"] *:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
}

[data-theme="dark"] .btn:focus-visible {
  outline: 2px solid var(--color-highlight);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-highlight-glow);
}

/* ----- Capabilities Page ----- */
@media (prefers-color-scheme: dark) {
  .capabilities-hero-title,
  .capabilities-title {
    color: var(--color-text-primary);
  }

  .capabilities-hero-subtitle,
  .capabilities-subtitle {
    color: var(--color-text-secondary);
  }

  .capabilities-overline {
    color: var(--color-accent);
  }

  .viz-card,
  .capability-card {
    background: var(--color-background-elevated);
    border-color: var(--color-border-subtle);
  }

  .viz-card:hover,
  .capability-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }

  .viz-card-title,
  .capability-name {
    color: var(--color-text-primary);
  }

  .viz-card-meta,
  .capability-desc {
    color: var(--color-text-secondary);
  }

  .bth-callout {
    background: rgba(74, 103, 65, 0.15);
    border-left-color: var(--color-accent);
  }

  .bth-callout-title {
    color: var(--color-accent);
  }

  .bth-callout-text {
    color: var(--color-text-secondary);
  }

  .constellation-container {
    background: radial-gradient(ellipse at center, rgba(60, 55, 50, 0.5) 0%, var(--color-background-elevated) 100%);
  }

  .constellation-star text {
    fill: var(--color-text-muted);
  }

  .radar-label {
    fill: var(--color-text-secondary);
  }

  .life-season-card {
    background: var(--color-background-surface);
  }

  .life-season-card:hover {
    background: var(--color-background-elevated);
  }

  .life-season-name {
    color: var(--color-text-primary);
  }

  .life-season-desc {
    color: var(--color-text-muted);
  }

  .capability-icon {
    background: rgba(74, 103, 65, 0.2);
  }
}

[data-theme="dark"] .capabilities-hero-title,
[data-theme="dark"] .capabilities-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .capabilities-hero-subtitle,
[data-theme="dark"] .capabilities-subtitle {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .capabilities-overline {
  color: var(--color-accent);
}

[data-theme="dark"] .viz-card,
[data-theme="dark"] .capability-card {
  background: var(--color-background-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .viz-card:hover,
[data-theme="dark"] .capability-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .viz-card-title,
[data-theme="dark"] .capability-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .viz-card-meta,
[data-theme="dark"] .capability-desc {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .bth-callout {
  background: rgba(74, 103, 65, 0.15);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] .bth-callout-title {
  color: var(--color-accent);
}

[data-theme="dark"] .bth-callout-text {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .constellation-container {
  background: radial-gradient(ellipse at center, rgba(60, 55, 50, 0.5) 0%, var(--color-background-elevated) 100%);
}

[data-theme="dark"] .constellation-star text {
  fill: var(--color-text-muted);
}

[data-theme="dark"] .radar-label {
  fill: var(--color-text-secondary);
}

[data-theme="dark"] .life-season-card {
  background: var(--color-background-surface);
}

[data-theme="dark"] .life-season-card:hover {
  background: var(--color-background-elevated);
}

[data-theme="dark"] .life-season-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .life-season-desc {
  color: var(--color-text-muted);
}

[data-theme="dark"] .capability-icon {
  background: rgba(74, 103, 65, 0.2);
}


/* =======================================================
   COMPREHENSIVE BODY TEXT & CARD DARK MODE FIXES
   Ensures all text elements have proper contrast
   Uses correct tokens from _tokens.css:
   - --color-text-primary: #faf6f0 (light cream for main text)
   - --color-text-secondary: #f0ebe4 (for body text)
   - --color-text-muted: #e8e2da (for captions/labels)
   - --color-accent: #d4a84a (golden accent)
   ======================================================= */

/* ----- Base Card Component ----- */
@media (prefers-color-scheme: dark) {
  .card {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-subtle);
  }

  .card:hover {
    border-color: var(--color-border-medium);
    box-shadow: var(--shadow-lg);
  }

  .card-feature {
    background: linear-gradient(
      135deg,
      var(--color-bg-primary) 0%,
      var(--color-bg-elevated) 100%
    );
  }
}

[data-theme="dark"] .card {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .card-feature {
  background: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    var(--color-bg-elevated) 100%
  );
}

/* ----- Card Team Styles ----- */
@media (prefers-color-scheme: dark) {
  .card-team {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-subtle);
  }

  .card-team .team-name {
    color: var(--color-text-primary);
  }

  .card-team .team-role {
    color: var(--color-accent);
  }

  .card-team .team-bio {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .card-team {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .card-team .team-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .card-team .team-role {
  color: var(--color-accent);
}

[data-theme="dark"] .card-team .team-bio {
  color: var(--color-text-secondary);
}

/* ----- Card Pricing Styles ----- */
@media (prefers-color-scheme: dark) {
  .card-pricing {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-subtle);
  }

  .card-pricing .pricing-tier {
    color: var(--color-text-muted);
  }

  .card-pricing .pricing-price {
    color: var(--color-text-primary);
  }

  .card-pricing .pricing-price span {
    color: var(--color-text-muted);
  }

  .card-pricing .pricing-desc {
    color: var(--color-text-secondary);
  }

  .card-pricing .pricing-features li {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .card-pricing {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .card-pricing .pricing-tier {
  color: var(--color-text-muted);
}

[data-theme="dark"] .card-pricing .pricing-price {
  color: var(--color-text-primary);
}

[data-theme="dark"] .card-pricing .pricing-price span {
  color: var(--color-text-muted);
}

[data-theme="dark"] .card-pricing .pricing-desc {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .card-pricing .pricing-features li {
  color: var(--color-text-secondary);
}

/* ----- General Body Text ----- */
@media (prefers-color-scheme: dark) {
  p {
    color: var(--color-text-secondary);
  }

  .body-lg,
  .body-md,
  .body-sm {
    color: var(--color-text-secondary);
  }

  .text-muted {
    color: var(--color-text-muted);
  }

  .text-secondary {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] p {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .body-lg,
[data-theme="dark"] .body-md,
[data-theme="dark"] .body-sm {
  color: var(--color-text-secondary);
}

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

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

/* ----- Eyebrow Text (Section Labels) ----- */
@media (prefers-color-scheme: dark) {
  .eyebrow {
    color: var(--color-accent);
  }
}

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

/* ----- Headlines ----- */
@media (prefers-color-scheme: dark) {
  .headline-xl,
  .headline-lg,
  .headline-md,
  .headline-sm {
    color: var(--color-text-primary);
  }
}

[data-theme="dark"] .headline-xl,
[data-theme="dark"] .headline-lg,
[data-theme="dark"] .headline-md,
[data-theme="dark"] .headline-sm {
  color: var(--color-text-primary);
}

/* ----- Feature Grid Content ----- */
@media (prefers-color-scheme: dark) {
  .feature-content .eyebrow {
    color: var(--color-accent);
  }

  .feature-content .headline-lg {
    color: var(--color-text-primary);
  }

  .feature-content .body-lg {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .feature-content .eyebrow {
  color: var(--color-accent);
}

[data-theme="dark"] .feature-content .headline-lg {
  color: var(--color-text-primary);
}

[data-theme="dark"] .feature-content .body-lg {
  color: var(--color-text-secondary);
}

/* ----- Section Backgrounds ----- */
@media (prefers-color-scheme: dark) {
  .section-features {
    background: var(--color-bg-primary);
  }

  .section-features.is-dark {
    background: var(--color-bg-primary);
  }

  .section-features.is-dark .eyebrow {
    color: var(--color-text-muted);
  }

  .section-features.is-dark .headline-lg {
    color: var(--color-text-primary);
  }

  .section-features.is-dark .body-lg {
    color: var(--color-text-secondary);
  }

  .section-team {
    background: var(--color-bg-secondary);
  }
}

[data-theme="dark"] .section-features {
  background: var(--color-bg-primary);
}

[data-theme="dark"] .section-features.is-dark {
  background: var(--color-bg-primary);
}

[data-theme="dark"] .section-features.is-dark .eyebrow {
  color: var(--color-text-muted);
}

[data-theme="dark"] .section-features.is-dark .headline-lg {
  color: var(--color-text-primary);
}

[data-theme="dark"] .section-features.is-dark .body-lg {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .section-team {
  background: var(--color-bg-secondary);
}

/* ----- Hero Section Text ----- */
@media (prefers-color-scheme: dark) {
  .hero-headline {
    color: var(--color-text-primary);
  }

  .hero-subhead {
    color: var(--color-text-secondary);
  }

  .hero-proof .proof-number {
    color: var(--color-text-primary);
  }

  .hero-proof .proof-label {
    color: var(--color-text-muted);
  }

  .hero-response {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-subtle);
  }

  .hero-response-header .response-name {
    color: var(--color-text-primary);
  }

  .hero-response-text {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .hero-headline {
  color: var(--color-text-primary);
}

[data-theme="dark"] .hero-subhead {
  color: var(--color-text-secondary);
}

[data-theme="dark"] .hero-proof .proof-number {
  color: var(--color-text-primary);
}

[data-theme="dark"] .hero-proof .proof-label {
  color: var(--color-text-muted);
}

[data-theme="dark"] .hero-response {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .hero-response-header .response-name {
  color: var(--color-text-primary);
}

[data-theme="dark"] .hero-response-text {
  color: var(--color-text-secondary);
}

/* ----- Scroll Indicator ----- */
@media (prefers-color-scheme: dark) {
  .scroll-indicator .scroll-text {
    color: var(--color-text-muted);
  }

  .scroll-indicator .scroll-arrow {
    border-color: var(--color-text-dimmed);
  }
}

[data-theme="dark"] .scroll-indicator .scroll-text {
  color: var(--color-text-muted);
}

[data-theme="dark"] .scroll-indicator .scroll-arrow {
  border-color: var(--color-text-dimmed);
}

/* ----- Phone Mockup ----- */
@media (prefers-color-scheme: dark) {
  .phone-mockup {
    background: #1a1a1a;
  }
}

[data-theme="dark"] .phone-mockup {
  background: #1a1a1a;
}

/* ----- FAQ Section (Additional coverage) ----- */
@media (prefers-color-scheme: dark) {
  .faq-question:hover {
    color: var(--color-accent);
  }

  .faq-question svg {
    color: var(--color-text-muted);
  }

  .faq-answer-inner {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .faq-question:hover {
  color: var(--color-accent);
}

[data-theme="dark"] .faq-question svg {
  color: var(--color-text-muted);
}

[data-theme="dark"] .faq-answer-inner {
  color: var(--color-text-secondary);
}

/* ----- Testimonial Cards ----- */
@media (prefers-color-scheme: dark) {
  .card-testimonial {
    background: var(--color-bg-elevated);
    border-color: var(--color-border-subtle);
  }

  .card-testimonial::before {
    color: var(--color-accent);
    opacity: 0.15;
  }
}

[data-theme="dark"] .card-testimonial {
  background: var(--color-bg-elevated);
  border-color: var(--color-border-subtle);
}

[data-theme="dark"] .card-testimonial::before {
  color: var(--color-accent);
  opacity: 0.15;
}

/* ----- Lists and Generic Content ----- */
@media (prefers-color-scheme: dark) {
  ul, ol {
    color: var(--color-text-secondary);
  }

  li {
    color: var(--color-text-secondary);
  }

  blockquote {
    color: var(--color-text-secondary);
    border-left-color: var(--color-accent);
  }

  figcaption {
    color: var(--color-text-muted);
  }

  small {
    color: var(--color-text-muted);
  }
}

[data-theme="dark"] ul,
[data-theme="dark"] ol {
  color: var(--color-text-secondary);
}

[data-theme="dark"] li {
  color: var(--color-text-secondary);
}

[data-theme="dark"] blockquote {
  color: var(--color-text-secondary);
  border-left-color: var(--color-accent);
}

[data-theme="dark"] figcaption {
  color: var(--color-text-muted);
}

[data-theme="dark"] small {
  color: var(--color-text-muted);
}

/* ----- Description Lists ----- */
@media (prefers-color-scheme: dark) {
  dt {
    color: var(--color-text-primary);
  }

  dd {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] dt {
  color: var(--color-text-primary);
}

[data-theme="dark"] dd {
  color: var(--color-text-secondary);
}

/* ----- Lead Text and Descriptions ----- */
@media (prefers-color-scheme: dark) {
  .lead,
  .description,
  .intro-text,
  .section-description,
  .card-description {
    color: var(--color-text-secondary);
  }
}

[data-theme="dark"] .lead,
[data-theme="dark"] .description,
[data-theme="dark"] .intro-text,
[data-theme="dark"] .section-description,
[data-theme="dark"] .card-description {
  color: var(--color-text-secondary);
}

/* ----- Captions and Labels ----- */
@media (prefers-color-scheme: dark) {
  .caption,
  .label,
  .meta,
  .timestamp,
  .byline {
    color: var(--color-text-muted);
  }
}

[data-theme="dark"] .caption,
[data-theme="dark"] .label,
[data-theme="dark"] .meta,
[data-theme="dark"] .timestamp,
[data-theme="dark"] .byline {
  color: var(--color-text-muted);
}

/* ----- Placeholders and Hints ----- */
@media (prefers-color-scheme: dark) {
  ::placeholder {
    color: var(--color-text-dimmed);
  }

  .hint,
  .helper-text {
    color: var(--color-text-muted);
  }
}

[data-theme="dark"] ::placeholder {
  color: var(--color-text-dimmed);
}

[data-theme="dark"] .hint,
[data-theme="dark"] .helper-text {
  color: var(--color-text-muted);
}