/* CoreWital global light/dark theme tokens and framework integration. */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-elevated: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --brand-primary: #2563eb;
  --brand-primary-hover: #1d4ed8;
  --brand-accent: #10b981;
  --danger: #dc2626;
  --success: #15803d;
  --warning: #b45309;
  --text-on-brand: #ffffff;
  --bg-inverse: #0b1220;
  --bg-inverse-elevated: #111827;
  --text-inverse: #f3f4f6;
  --text-inverse-secondary: #cbd5e1;
  --focus-ring: rgba(37, 99, 235, 0.25);
  --surface-hover: rgba(37, 99, 235, 0.08);
  --brand-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --brand-border: color-mix(in srgb, var(--brand-primary) 24%, transparent);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--brand-accent) 28%, transparent);
  --overlay: rgba(11, 18, 32, 0.62);
  --shadow-color: rgba(17, 24, 39, 0.12);
  --mask-solid: #000000;

  /* Existing component aliases. */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-accent: var(--brand-accent);
  --color-dark: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-bg-light: var(--bg-secondary);
  --color-border: var(--border);
  --color-white: var(--bg-elevated);
  --cw-primary: var(--brand-primary);
  --cw-dark: var(--text-primary);
  --cw-emerald: var(--brand-accent);

  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--bg-secondary);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0b1220;
  --bg-secondary: #111827;
  --bg-elevated: #1a2333;
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --border: #2a3448;
  --brand-primary: #3b82f6;
  --brand-primary-hover: #60a5fa;
  --brand-accent: #10b981;
  --danger: #f87171;
  --success: #34d399;
  --warning: #fbbf24;
  --text-on-brand: #07101f;
  --bg-inverse: #070d18;
  --bg-inverse-elevated: #111827;
  --text-inverse: #f3f4f6;
  --text-inverse-secondary: #cbd5e1;
  --focus-ring: rgba(96, 165, 250, 0.32);
  --surface-hover: rgba(59, 130, 246, 0.14);
  --brand-soft: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --brand-border: color-mix(in srgb, var(--brand-primary) 32%, transparent);
  --accent-soft: color-mix(in srgb, var(--brand-accent) 16%, transparent);
  --accent-border: color-mix(in srgb, var(--brand-accent) 34%, transparent);
  --overlay: rgba(0, 0, 0, 0.72);
  --shadow-color: rgba(0, 0, 0, 0.35);
  --mask-solid: #000000;

  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-primary-hover);
  --color-accent: var(--brand-accent);
  --color-dark: var(--text-primary);
  --color-muted: var(--text-secondary);
  --color-bg-light: var(--bg-secondary);
  --color-border: var(--border);
  --color-white: var(--bg-elevated);
  --cw-primary: var(--brand-primary);
  --cw-dark: var(--text-primary);
  --cw-emerald: var(--brand-accent);

  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-bg: var(--bg-secondary);
}

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

html.theme-ready *,
html.theme-ready *::before,
html.theme-ready *::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-ready *,
  html.theme-ready *::before,
  html.theme-ready *::after {
    transition-duration: 0.01ms !important;
  }
}

/* Bootstrap surfaces and typography. */
.bg-light,
.bg-white {
  background-color: var(--bg-secondary) !important;
}

.text-dark,
.text-body,
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

.text-muted,
.text-secondary,
.form-text {
  color: var(--text-secondary) !important;
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--border) !important;
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.accordion-item,
.toast,
.popover {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button {
  color: var(--text-primary);
  background-color: var(--bg-elevated) !important;
  border-color: var(--border);
}

.accordion-button:not(.collapsed),
.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
  color: var(--brand-primary);
  background-color: var(--surface-hover);
}

.dropdown-item,
.nav-link,
.page-link {
  color: var(--text-primary);
}

.nav-tabs {
  border-color: var(--border);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
  color: var(--brand-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

.form-control,
.form-select,
.form-check-input,
.input-group-text {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.85;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  color: var(--text-secondary);
  background-color: var(--bg-secondary);
  opacity: 1;
}

.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-primary,
.bg-primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

.btn-primary {
  color: var(--text-on-brand);
}

.btn-primary:hover,
.btn-primary:focus {
  color: var(--text-on-brand);
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

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

/* Tables and DataTables. */
.table {
  --bs-table-color: var(--text-primary);
  --bs-table-bg: var(--bg-elevated);
  --bs-table-border-color: var(--border);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-striped-bg: var(--bg-secondary);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-hover-bg: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border);
}

table.dataTable,
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
  color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.page-link {
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.page-item.active .page-link {
  color: var(--text-on-brand) !important;
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* Panels, navigation, and shared site components. */
.sidebar,
.account-sidebar {
  color: var(--text-primary);
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
}

.sidebar .nav-link,
.account-sidebar .nav-link {
  color: var(--text-primary);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.account-sidebar .nav-link:hover,
.account-sidebar .nav-link.active {
  color: var(--brand-primary);
  background-color: var(--surface-hover);
}

.menu-sortable li {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border);
}

.cw-site,
.site-main,
.cw-section {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

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

.cw-card,
.cw-pillar,
.cw-feature,
.cw-service-card,
.cw-testimonial,
.cw-case,
.cw-contact-card,
.cw-team-card,
.cw-value-card,
.cw-pricing-card,
.cw-blog-card,
.cw-faq,
.cw-step-form,
.cw-rating-summary,
.cw-metrics__item {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

.cw-header,
.cw-header.is-scrolled,
.cw-mega,
.cw-mega__panel,
.cw-drawer__panel,
.cw-landing-bar {
  color: var(--text-primary);
  background-color: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
  border-color: var(--border);
}

.cw-nav__trigger,
.cw-logo,
.cw-mega__title,
.cw-acc__btn,
.cw-acc__link strong {
  color: var(--text-primary);
}

.cw-mega__desc,
.cw-acc__link span {
  color: var(--text-secondary);
}

.cw-mega-backdrop,
.cw-drawer__scrim {
  background-color: var(--overlay);
}

.cw-section--dark,
.cw-hero-dark,
.cw-home-hero,
.cw-page-hero,
.cw-footer,
.cw-sticky-cta,
.site-hero {
  color: var(--text-inverse);
  background-color: var(--bg-inverse);
}

.cw-section--dark h1,
.cw-section--dark h2,
.cw-section--dark h3,
.cw-hero-dark h1,
.cw-home-hero h1,
.cw-page-hero h1,
.cw-footer h2,
.cw-footer h3 {
  color: var(--text-inverse) !important;
}

.cw-footer a,
.cw-footer p {
  color: var(--text-inverse-secondary);
}

.cw-btn--primary {
  color: var(--text-on-brand);
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.cw-btn--primary:hover,
.cw-btn--primary:focus {
  color: var(--text-on-brand);
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.cw-btn--secondary {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

.cw-btn--secondary:hover,
.cw-btn--secondary:focus {
  color: var(--bg-primary);
  background: var(--text-primary);
}

.cw-modal .form-control,
.cw-modal .form-select {
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border-color: var(--border);
}

.swal2-popup,
.swal2-title,
.swal2-html-container {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  color: var(--text-primary);
  background: var(--bg-elevated);
  border-color: var(--border);
}

.ql-snow .ql-stroke {
  stroke: var(--text-primary);
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: var(--text-primary);
}

.ql-snow .ql-picker {
  color: var(--text-primary);
}

pre,
code {
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

/* Toggle */
.cw-theme-toggle {
  display: inline-flex;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

.cw-theme-toggle:hover,
.cw-theme-toggle:focus-visible {
  color: var(--brand-primary);
  background: var(--surface-hover);
  outline: none;
}

.navbar.bg-primary .cw-theme-toggle {
  color: var(--text-on-brand);
  border-color: color-mix(in srgb, var(--text-on-brand) 55%, transparent);
}

.navbar.bg-dark .cw-theme-toggle {
  color: var(--text-inverse);
  border-color: color-mix(in srgb, var(--text-inverse) 55%, transparent);
}

:root[data-theme="dark"] .navbar.bg-primary {
  --bs-navbar-brand-color: var(--text-on-brand);
  --bs-navbar-brand-hover-color: var(--text-on-brand);
  --bs-navbar-color: var(--text-on-brand);
  --bs-navbar-hover-color: var(--text-on-brand);
}

:root[data-theme="dark"] .navbar.bg-primary .text-white-50,
:root[data-theme="dark"] .navbar.bg-primary .btn-outline-light {
  color: var(--text-on-brand) !important;
  border-color: var(--text-on-brand);
}

.cw-theme-toggle .fa-sun {
  color: var(--warning);
}