:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12100f;
    --surface: #1d1816;
    --surface-strong: #27201d;
    --text: #f7eee7;
    --muted: #cbbdb4;
    --border: #4a3b35;
    --accent: #f3a07f;
    --accent-dark: #ffd0be;
    --accent-orange: #ff9a5f;
    --accent-gold: #ffd166;
    --accent-blue: #62d3ee;
    --accent-purple: #cf8cff;
    --accent-pink: #ff7f96;
    --shadow: 0 16px 45px rgba(0, 0, 0, 0.36);
    --soft-glow: 0 20px 65px rgba(207, 140, 255, 0.18);
    --section-label: #d5c5bb;
    --utility-action: #f1a083;
    --utility-action-dark: #ffd2c2;
    --attention-red: #ff9288;
  }

  html,
  body {
    background: var(--bg);
    color: var(--text);
  }

  body {
    background:
      radial-gradient(circle at 8% -10%, rgba(98, 211, 238, 0.08), transparent 26rem),
      radial-gradient(circle at 92% 0%, rgba(207, 140, 255, 0.10), transparent 28rem),
      radial-gradient(circle at 50% 110%, rgba(255, 154, 95, 0.08), transparent 32rem),
      var(--bg);
  }

  a,
  .nav-links a,
  .logout-form button,
  .desktop-more-menu summary,
  .desktop-more-panel a,
  .desktop-more-panel .logout-form button,
  .mobile-nav-panel a,
  .mobile-nav-panel .logout-form button,
  .list-row-more summary,
  .action-icon-button,
  .strong-link,
  .record-action-panel a,
  .inline-more-panel a,
  .quick-organizer-popover summary,
  .readiness-link {
    color: var(--accent);
  }

  a:hover,
  a:focus,
  .nav-links a:hover,
  .nav-links a:focus,
  .logout-form button:hover,
  .logout-form button:focus,
  .desktop-more-menu summary:hover,
  .desktop-more-menu summary:focus,
  .desktop-more-panel a:hover,
  .desktop-more-panel a:focus,
  .desktop-more-panel .logout-form button:hover,
  .desktop-more-panel .logout-form button:focus,
  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus,
  .mobile-nav-panel .logout-form button:hover,
  .mobile-nav-panel .logout-form button:focus,
  .list-row-more summary:hover,
  .list-row-more summary:focus,
  .action-icon-button:hover,
  .action-icon-button:focus,
  .strong-link:hover,
  .strong-link:focus,
  .record-action-panel a:hover,
  .record-action-panel a:focus,
  .inline-more-panel a:hover,
  .inline-more-panel a:focus,
  .quick-organizer-popover summary:hover,
  .quick-organizer-popover summary:focus,
  .readiness-link:hover,
  .readiness-link:focus {
    color: var(--accent-dark);
  }

  .site-header {
    background: rgba(29, 24, 22, 0.92);
    border-bottom-color: var(--border);
  }

  .brand,
  .brand:hover,
  .brand:focus,
  .brand-wordmark,
  h1,
  h2,
  h3,
  h4,
  .live-update-banner strong,
  .search-result-summary,
  .live-search-result,
  .status-chip strong,
  .event-meta-chip:not(.warning) strong,
  .booking-count-chip strong,
  .readiness-item:not(.warning) strong {
    color: var(--text);
  }

  .card,
  .metric-card,
  .message,
  .desktop-more-panel,
  .mobile-nav-panel,
  .universal-search-suggestions,
  .live-search-menu,
  .list-row-more-panel,
  .record-action-panel,
  .inline-more-panel,
  .live-update-banner {
    background: var(--surface-strong);
    border-color: var(--border);
  }

  .form-field input,
  .form-field select,
  .form-field textarea,
  .form-stack input,
  .form-stack select,
  .form-stack textarea,
  .filter-row input,
  .filter-row select,
  .autocomplete-form input,
  .inline-booking-form input,
  .inline-booking-form select,
  .inline-booking-form textarea,
  .global-search-field,
  .mobile-search-field {
    background: var(--surface-strong);
    border-color: var(--border);
    color: var(--text);
  }

  input,
  select,
  textarea {
    color-scheme: dark;
  }

  input::placeholder,
  textarea::placeholder {
    color: rgba(247, 238, 231, 0.52);
  }

  .global-search-field input,
  .mobile-search-field input,
  .global-search-field input:focus,
  .mobile-search-field input:focus {
    background: transparent;
    color: var(--text);
  }

  .global-search-field button,
  .mobile-search-field button,
  .page-header .button-row.compact-actions .button:not(.secondary),
  .programming-tab[aria-current="page"] {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
  }

  .global-search-field button:hover,
  .global-search-field button:focus,
  .mobile-search-field button:hover,
  .mobile-search-field button:focus,
  .programming-tab[aria-current="page"]:hover,
  .programming-tab[aria-current="page"]:focus {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--bg);
  }

  .button.secondary,
  .page-header .button-row.compact-actions .button.secondary,
  .page-header .button-row.compact-actions .record-action-button,
  .page-header .record-action-button.button.secondary,
  .next-actions-shell .next-actions-toggle.button.secondary {
    background: rgba(247, 238, 231, 0.06);
    border-color: rgba(207, 140, 255, 0.34);
    color: var(--accent-dark);
  }

  .button.secondary:hover,
  .button.secondary:focus,
  .page-header .button-row.compact-actions .button.secondary:hover,
  .page-header .button-row.compact-actions .button.secondary:focus,
  .page-header .button-row.compact-actions .record-action-button:hover,
  .page-header .button-row.compact-actions .record-action-button:focus,
  .page-header .record-action-button.button.secondary:hover,
  .page-header .record-action-button.button.secondary:focus,
  .next-actions-shell .next-actions-toggle.button.secondary:hover,
  .next-actions-shell .next-actions-toggle.button.secondary:focus {
    background: rgba(207, 140, 255, 0.14);
    border-color: rgba(207, 140, 255, 0.48);
    color: var(--text);
  }

  .page-header .button-row.compact-actions,
  .programming-tabs,
  .list-summary-item,
  .onboarding-steps li,
  .compact-add-panel,
  .inline-empty-state,
  .speaker-form .fee-row,
  .search-result-row,
  .workflow-step,
  .field-edit-panel {
    background: rgba(247, 238, 231, 0.055);
    border-color: var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  }

  .record-action-panel a:hover,
  .record-action-panel a:focus,
  .inline-more-panel a:hover,
  .inline-more-panel a:focus,
  .quick-organizer-popover summary:hover,
  .quick-organizer-popover summary:focus,
  .desktop-more-panel a:hover,
  .desktop-more-panel a:focus,
  .desktop-more-panel .logout-form button:hover,
  .desktop-more-panel .logout-form button:focus,
  .mobile-nav-panel a:hover,
  .mobile-nav-panel a:focus,
  .mobile-nav-panel .logout-form button:hover,
  .mobile-nav-panel .logout-form button:focus,
  .live-search-result:hover,
  .live-search-result:focus,
  .live-search-option:hover,
  .live-search-option:focus,
  .list-row-more-panel a:hover,
  .list-row-more-panel a:focus,
  .search-result-row:hover,
  .search-result-row:focus,
  .programming-tab:hover,
  .programming-tab:focus,
  .action-icon-button:hover,
  .action-icon-button:focus {
    background: rgba(207, 140, 255, 0.12);
    color: var(--accent-dark);
  }

  .search-result-title,
  .live-search-result-title,
  .selected-option,
  .programming-tab,
  .list-record-title {
    color: var(--accent-dark);
  }

  .search-result-type,
  .live-search-result-type,
  .next-actions-count {
    background: rgba(207, 140, 255, 0.14);
    border-color: rgba(207, 140, 255, 0.32);
    color: var(--accent-dark);
  }

  th,
  td,
  .detail-list div,
  .inline-form-row,
  .inline-field-list > div,
  .inline-detail-row,
  .live-search-result,
  .live-search-option,
  .main-program-card div {
    border-color: var(--border);
  }

  .badge,
  .status-chip,
  .status-pill,
  .list-context-chip,
  .action-icon-button,
  .mini-pill {
    border-color: var(--border);
  }

  .pill.success,
  .status-pill.ready,
  .booking-readiness .status-pill.ready,
  .mini-pill.confirmed {
    background: rgba(117, 203, 152, 0.16);
    border-color: rgba(117, 203, 152, 0.34);
    color: #a8efbf;
  }

  .pill.warning,
  .status-pill.missing,
  .booking-readiness .status-pill.missing {
    background: rgba(255, 209, 102, 0.16);
    border-color: rgba(255, 209, 102, 0.36);
    color: #ffe29b;
  }

  .pill.danger,
  .action-icon-button.danger,
  .danger-link,
  .button.secondary.danger,
  .page-header .button-row.compact-actions .record-action-panel a.danger-link {
    background: rgba(255, 146, 136, 0.12);
    border-color: rgba(255, 146, 136, 0.34);
    color: var(--attention-red) !important;
  }

  .button.secondary.danger:hover,
  .button.secondary.danger:focus,
  .page-header .button-row.compact-actions .record-action-panel a.danger-link:hover,
  .page-header .button-row.compact-actions .record-action-panel a.danger-link:focus {
    background: rgba(255, 146, 136, 0.2);
    color: #ffd4ce !important;
  }

  .message.success { border-color: rgba(117, 203, 152, 0.5); }
  .message.warning { border-color: rgba(255, 209, 102, 0.5); }
  .message.error { border-color: rgba(255, 146, 136, 0.55); }

  .landing-hero {
    background:
      radial-gradient(circle at 15% 15%, rgba(98, 211, 238, 0.13), transparent 20rem),
      radial-gradient(circle at 90% 15%, rgba(207, 140, 255, 0.13), transparent 24rem),
      linear-gradient(135deg, rgba(39, 32, 29, 0.94), rgba(29, 24, 22, 0.88));
    border-color: var(--border);
    box-shadow: var(--shadow);
  }

  .landing-hero::before,
  .landing-cta::before {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple) 42%, var(--accent-pink) 70%, var(--accent-gold));
  }

  .hero-copy h1,
  .main-program-card h2,
  .landing-section > div:first-child h2,
  .showcase-copy h2,
  .landing-cta h2,
  .workflow-step strong {
    color: var(--text);
  }

  .hero-kicker,
  .section-kicker,
  .card-label,
  .feature-number {
    color: var(--accent-dark);
  }

  .hero-lede,
  .main-program-card dt,
  .showcase-copy p:last-child,
  .workflow-step p,
  .metadata,
  .lede,
  .empty-state p,
  .site-footer,
  .help-text,
  .empty-value,
  .list-record-subtext,
  .list-empty-value,
  .search-summary,
  .live-search-empty,
  .compact-detail-list dt,
  .detail-list dt {
    color: var(--muted);
  }

  .hero-secondary {
    background: rgba(247, 238, 231, 0.08);
    border-color: rgba(207, 140, 255, 0.34);
    color: var(--accent-dark);
  }

  .hero-secondary:hover,
  .hero-secondary:focus {
    background: rgba(207, 140, 255, 0.14);
    color: var(--text);
  }

  .sunburst::after {
    background: radial-gradient(circle, rgba(18, 16, 15, 0.88) 0 34%, rgba(18, 16, 15, 0.48) 35% 49%, transparent 50%);
  }

  .program-card,
  .showcase-section,
  .landing-cta {
    background: rgba(39, 32, 29, 0.92);
    border-color: var(--border);
    box-shadow: var(--shadow);
    color: var(--text);
  }

  .workflow-step {
    background: linear-gradient(135deg, rgba(39, 32, 29, 0.92), rgba(31, 25, 23, 0.78));
  }

  .landing-strip {
    background: #080706;
    color: var(--text);
  }

  .landing-strip span {
    background: rgba(247, 238, 231, 0.08);
    border-color: rgba(247, 238, 231, 0.14);
  }

  .gold-card {
    color: #25160f;
  }

  .coral-card,
  .blue-card {
    color: #fffaf4;
  }

  @media (max-width: 720px) {
    .list-table tr {
      background: var(--surface);
      border-color: var(--border);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    }

    .list-table td {
      color: var(--muted);
    }
  }

  @media (max-width: 760px) {
    body {
      background: var(--bg);
    }
  }
}