/* Follow the device preference directly, including changes while the page is open. */
:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --purple: oklch(0.79 0.12 305);
    --violet: oklch(0.73 0.14 305);
    --lilac: oklch(0.78 0.09 305);
    --sky: oklch(0.8 0.08 235);
    --lavender: oklch(0.27 0.035 305);
    --ink: oklch(0.94 0.01 305);
    --muted: oklch(0.76 0.025 305);
    --line: oklch(0.37 0.025 305);
    --cream: oklch(0.19 0.012 305);
    --night-page: oklch(0.16 0.008 305);
    --night-surface: oklch(0.23 0.018 305);
    --night-raised: oklch(0.29 0.025 305);
    --night-action: oklch(0.43 0.14 305);
    --night-action-hover: oklch(0.49 0.14 305);
    --night-process: oklch(0.22 0.06 305);
    --night-footer: oklch(0.13 0.015 305);
    --night-backdrop: oklch(0.1 0.01 305 / 75%);
    --night-shadow: 0 20px 40px oklch(0.08 0 0 / 25%);
  }

  body { background: var(--night-page); }
  .site-header { background: var(--cream); border-color: var(--line); }
  .desktop-nav a { color: var(--ink); }
  .site-header .brand img { content: url('/assets/logo-white.svg'); }
  .dashboard-brand img, .brand-story > img { content: url('/assets/symbol-white.svg'); }
  .visual-bottom img, .faq-flower img { content: url('/assets/symbol-white.svg'); }

  .hero-visual, .contact-section { background: var(--lavender); border-color: var(--line); }
  .dashboard, .floating-note, .audience-strip, .service-card, .audience-panel,
  .domain-card, .plan-card, .bpo-panel, .brief-card, .content-dialog,
  .download-button { background: var(--night-surface); border-color: var(--line); }
  .dashboard, .floating-note, .brief-card, .content-dialog { box-shadow: var(--night-shadow); }
  .domain-finance, .plan-orientation, .bpo-panel-intro { background: var(--lavender); }
  .service-card:hover { background: var(--night-raised); }
  .fit-section, .professional-mark, .orbit, .brand-story::after,
  .contact-channel, .contact-channel .channel-icon, .plan-orientation,
  .plan-orientation .check-list { border-color: var(--line); }
  .dashboard-header, .dashboard-footer, .chart-lines i { border-color: var(--line); }

  .dashboard-period, .chart-tabs, .audience-tabs, .plan-tabs,
  .balance-icon, .note-icon, .bpo-panel-intro .service-icon {
    background: var(--night-raised); border-color: var(--line);
  }
  .chart-tab.active, .audience-tabs button[aria-selected=true],
  .plan-tabs button[aria-selected=true] { background: var(--night-surface); color: var(--purple); }
  .brief-card select, .brief-card textarea, .brief-card #contact-details,
  .contact-method input, .contact-method textarea {
    background: var(--cream); color: var(--ink); border-color: var(--line);
  }
  .brief-card select:disabled { background: var(--night-raised); color: var(--muted); }
  .brief-card #contact-details::placeholder { color: var(--muted); }

  .visual-topline, .visual-topline > span:last-child, .visual-bottom p,
  .illustrative-label, .chart-axis, .bar-group > span, .dashboard-period,
  .dashboard-footer, .audience-inner > span, .audience-inner > p,
  .service-number, .approval-note strong, .audience-tabs button,
  .check-list li, .story-tag, .brand-story > p, .story-caption,
  .founder-signature small, .contact-promise > p, .contact-copy .contact-pending,
  .brief-card label:not(.goal-option), .brief-card legend, .goal-option,
  .form-note, .reset-button, .domain-label, .one-off-services > span,
  .plan-tabs button, .plan-audience, .plan-caption p, .bpo-deliveries > div > span,
  .bpo-boundary, .contact-channel small, .contact-copy .contact-identity,
  .brief-card label > span { color: var(--muted); }
  .faq-list summary { color: var(--ink); }
  .visual-bottom strong, .plan-caption strong, .commercial-note strong,
  .brief-card .panel-kicker { color: var(--purple); }

  .button, .skip-link, .toast {
    background: var(--night-action); border-color: var(--night-action); color: var(--white);
  }
  .button:hover { background: var(--night-action-hover); border-color: var(--night-action-hover); }
  .button-outline { background: transparent; color: var(--purple); border-color: var(--purple); }
  .button-outline:hover { background: var(--night-action); color: var(--white); }
  .process-section { background: var(--night-process); }
  .site-footer { background: var(--night-footer); }
  .footer-bottom, .footer-bottom button, .footer-contact, .back-top { color: var(--muted); }
  .content-dialog::backdrop { background: var(--night-backdrop); }
  ::selection { background: var(--night-action); color: var(--white); }
}