/* ==========================================================================
   Vara SaaS — Dark Mode Tokens + Elementor Integration
   Architecture: body-scoped tokens, Elementor global color mapping, .e-con support
   Follows apex-velocity pattern: :root light, body.va-dark dark, @media fallback
   ========================================================================== */

/* ── Dark Mode Design Tokens (body scope) ── */
body.va-dark {
  color-scheme: dark;

  /* Surface & Background */
  --vara-bg: #0b1326;
  --vara-bg-alt: #131b2e;
  --vara-bg-elevated: #31394d;
  --vara-surface: #0b1326;
  --vara-surface-alt: #171f33;
  --vara-surface-container-lowest: #060e20;
  --vara-surface-container-low: #131b2e;
  --vara-surface-container: #171f33;
  --vara-surface-container-high: #222a3d;
  --vara-surface-container-highest: #2d3449;

  /* Text */
  --vara-text: #dae2fd;
  --vara-text-heading: #dae2fd;
  --vara-text-secondary: #ccc3d8;
  --vara-text-muted: #ccc3d8;
  --vara-text-on-primary: #3f008e;

  /* Brand Colors */
  --vara-primary: #d2bbff;
  --vara-primary-rgb: 210, 187, 255;
  --vara-secondary: #cebdff;
  --vara-accent: #4edea3;
  --vara-tertiary: #4edea3;

  /* Containers */
  --vara-primary-container: #7c3aed;
  --vara-secondary-container: #4f319c;
  --vara-tertiary-container: #007650;

  /* Links */
  --vara-link: #d2bbff;

  /* Text on primary */
  --vara-text-on-primary: #ffffff;

  /* Borders */
  --vara-border: #4a4455;
  --vara-border-light: #2d3449;
  --vara-outline: #958da1;
  --vara-outline-variant: #4a4455;

  /* Dropdown */
  --vara-dropdown-bg: #060e20;

  /* Cards */
  --vara-card-bg: #060e20;
  --vara-card-border: rgba(255, 255, 255, 0.1);
  --vara-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  --vara-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.3);

  /* Elevation */
  --vara-glass-bg: rgba(11, 19, 38, 0.7);
  --vara-glass-border: rgba(255, 255, 255, 0.1);

  /* Focus */
  --vara-focus-ring: rgba(210, 187, 255, 0.2);
  --vara-focus-ring-dark: rgba(210, 187, 255, 0.15);

  /* Shadows */
  --vara-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --vara-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  --vara-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
  --vara-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4);
  --vara-shadow-primary: 0 0 20px rgba(124, 58, 237, 0.4);
  --vara-shadow-primary-lg: 0 0 30px rgba(124, 58, 237, 0.6);

  /* White stays white */
  --vara-white: #ffffff;
}

/* ── OS Preference Fallback (no explicit user choice) ── */
@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) {
    color-scheme: dark;

    --vara-bg: #0b1326;
    --vara-bg-alt: #131b2e;
    --vara-bg-elevated: #31394d;
    --vara-surface: #0b1326;
    --vara-surface-alt: #171f33;
    --vara-surface-container-lowest: #060e20;
    --vara-surface-container-low: #131b2e;
    --vara-surface-container: #171f33;
    --vara-surface-container-high: #222a3d;
    --vara-surface-container-highest: #2d3449;

    --vara-text: #dae2fd;
    --vara-text-heading: #dae2fd;
    --vara-text-secondary: #ccc3d8;
    --vara-text-muted: #ccc3d8;
    --vara-text-on-primary: #ffffff;

    --vara-primary: #d2bbff;
    --vara-primary-rgb: 210, 187, 255;
    --vara-secondary: #cebdff;
    --vara-accent: #4edea3;
    --vara-tertiary: #4edea3;

    --vara-primary-container: #7c3aed;
    --vara-secondary-container: #4f319c;
    --vara-tertiary-container: #007650;

    --vara-link: #d2bbff;

    --vara-border: #4a4455;
    --vara-border-light: #2d3449;
    --vara-outline: #958da1;
    --vara-outline-variant: #4a4455;

    --vara-dropdown-bg: #060e20;

    --vara-card-bg: #060e20;
    --vara-card-border: rgba(255, 255, 255, 0.1);
    --vara-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --vara-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.3);

    --vara-glass-bg: rgba(11, 19, 38, 0.7);
    --vara-glass-border: rgba(255, 255, 255, 0.1);

    --vara-focus-ring: rgba(210, 187, 255, 0.2);
    --vara-focus-ring-dark: rgba(210, 187, 255, 0.15);

    --vara-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --vara-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --vara-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.3);
    --vara-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4);
    --vara-shadow-primary: 0 0 20px rgba(124, 58, 237, 0.4);
    --vara-shadow-primary-lg: 0 0 30px rgba(124, 58, 237, 0.6);

    --vara-white: #ffffff;
  }
}

/* ── Anti-FOUC pending class (applied by inline script before DOMContentLoaded) ── */
html.va-dark-pending {
  background-color: #0b1326;
}

/* ── Global dark mode resets ── */
body.va-dark {
  background-color: var(--vara-bg);
  color: var(--vara-text);
}

body.va-dark .vara-saas-main-content,
body.va-dark .vara-saas-builder-canvas {
  background-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .vara-saas-main-content,
  body:not(.va-light):not(.va-dark) .vara-saas-builder-canvas {
    background-color: transparent !important;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) {
    background-color: var(--vara-bg);
    color: var(--vara-text);
  }
}

body.va-dark a {
  color: var(--vara-link);
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) a {
    color: var(--vara-link);
  }
}

body.va-dark img {
  opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) img {
    opacity: 0.9;
  }
}

/* ==========================================================================
   Elementor Global Color Mapping
   Maps --e-global-color-* to theme tokens so ALL Elementor widgets auto-adapt.
   ========================================================================== */

body.va-dark {
  --e-global-color-primary: #d2bbff;
  --e-global-color-secondary: #cebdff;
  --e-global-color-text: #dae2fd;
  --e-global-color-accent: #4edea3;

  /* Theme custom globals — remapped so dark text never lands on a dark surface. */
  --e-global-color-vara-heading: #e8ecf8;
  --e-global-color-vara-muted: #94a3b8;
  --e-global-color-vara-surface: #111827;
  --e-global-color-vara-border: #334155;
  --e-global-color-vara-dark-bg: #0b1326;

  --e-con-container-bg: #0b1326;
  --e-con-container-color: #dae2fd;
  --e-con-border-color: #4a4455;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) {
    --e-global-color-primary: #d2bbff;
    --e-global-color-secondary: #cebdff;
    --e-global-color-text: #dae2fd;
    --e-global-color-accent: #4edea3;

    /* Theme custom globals — remapped so dark text never lands on a dark surface. */
    --e-global-color-vara-heading: #e8ecf8;
    --e-global-color-vara-muted: #94a3b8;
    --e-global-color-vara-surface: #111827;
    --e-global-color-vara-border: #334155;
    --e-global-color-vara-dark-bg: #0b1326;

    --e-con-container-bg: #0b1326;
    --e-con-container-color: #dae2fd;
    --e-con-border-color: #4a4455;
  }
}

/* ==========================================================================
   Elementor Flex Container (.e-con) Dark Mode
   ========================================================================== */

/* ── Base containers ── */
body.va-dark .e-con {
  --e-con-container-bg: var(--vara-surface);
  --e-con-container-color: var(--vara-text);
  --e-con-border-color: var(--vara-border);
}

body.va-dark .e-con,
body.va-dark .e-con > .e-con-inner {
  background-color: var(--vara-bg) !important;
  color: var(--vara-text) !important;
}

body.va-dark .e-con-boxed {
  background-color: var(--vara-bg) !important;
}

body.va-dark .e-con > .e-con-inner {
  background-color: transparent !important;
}

body.va-dark .e-con.e-con-boxed {
  border-color: var(--vara-border) !important;
}

body.va-dark .e-con .e-con {
  background-color: transparent !important;
}

body.va-dark .e-con .e-con {
  color: var(--vara-text);
}

body.va-dark .e-con.e-flex.e-con--gap-custom {
  gap: var(--gap, 20px);
}

/* ── @media fallback for .e-con ── */
@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .e-con {
    --e-con-container-bg: var(--vara-surface);
    --e-con-container-color: var(--vara-text);
    --e-con-border-color: var(--vara-border);
  }

  body:not(.va-light):not(.va-dark) .e-con,
  body:not(.va-light):not(.va-dark) .e-con > .e-con-inner {
    background-color: var(--vara-bg) !important;
    color: var(--vara-text) !important;
  }

  body:not(.va-light):not(.va-dark) .e-con-boxed {
    background-color: var(--vara-bg) !important;
  }

  body:not(.va-light):not(.va-dark) .e-con > .e-con-inner {
    background-color: transparent !important;
  }

  body:not(.va-light):not(.va-dark) .e-con.e-con-boxed {
    border-color: var(--vara-border) !important;
  }

  body:not(.va-light):not(.va-dark) .e-con .e-con {
    background-color: transparent !important;
  }
}

/* ==========================================================================
   Elementor Legacy Widgets
   ========================================================================== */

body.va-dark .elementor-section {
  background-color: var(--vara-bg) !important;
  color: var(--vara-text) !important;
}

body.va-dark .elementor-section.elementor-section-boxed > .elementor-container,
body.va-dark .elementor-section > .elementor-container {
  background-color: transparent !important;
}

body.va-dark .elementor-column {
  background-color: transparent !important;
  color: var(--vara-text) !important;
}

body.va-dark .elementor-column-wrap,
body.va-dark .elementor-widget-wrap {
  background-color: transparent !important;
}

/* ── Global: all Elementor backgrounds uniform in dark mode ── */
body.va-dark .elementor-widget-container,
body.va-dark .elementor-element {
  background-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .elementor-widget-container,
  body:not(.va-light):not(.va-dark) .elementor-element {
    background-color: transparent !important;
  }
}

/* ── @media fallback for legacy ── */
@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .elementor-section {
    background-color: var(--vara-bg) !important;
    color: var(--vara-text) !important;
  }

  body:not(.va-light):not(.va-dark) .elementor-section.elementor-section-boxed > .elementor-container,
  body:not(.va-light):not(.va-dark) .elementor-section > .elementor-container {
    background-color: transparent !important;
  }

  body:not(.va-light):not(.va-dark) .elementor-column {
    background-color: transparent !important;
    color: var(--vara-text) !important;
  }

  body:not(.va-light):not(.va-dark) .elementor-column-wrap,
  body:not(.va-light):not(.va-dark) .elementor-widget-wrap {
    background-color: transparent !important;
  }
}

/* ==========================================================================
   Elementor Widget Dark Mode Overrides
   ========================================================================== */

body.va-dark .elementor-heading-title {
  color: var(--vara-text-heading) !important;
}

body.va-dark .e-con .elementor-heading-title {
  color: var(--vara-text-heading) !important;
}

body.va-dark .elementor-text-editor,
body.va-dark .elementor-text-editor p,
body.va-dark .elementor-text-editor li,
body.va-dark .elementor-text-editor span {
  color: var(--vara-text) !important;
}

body.va-dark .elementor-button {
  background-color: var(--vara-primary-container) !important;
  color: #ffffff !important;
  border-color: var(--vara-primary-container) !important;
}

body.va-dark .elementor-button:hover {
  background-color: var(--vara-primary) !important;
  color: var(--vara-text-on-primary) !important;
}

body.va-dark .elementor-button-text {
  color: inherit !important;
}

body.va-dark .elementor-button.elementor-size-sm,
body.va-dark a.elementor-button-placeholder {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--vara-text) !important;
}

body.va-dark .elementor-divider-separator,
body.va-dark .elementor-divider .elementor-divider-separator {
  border-color: var(--vara-border) !important;
}

body.va-dark .elementor-icon {
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-icon i {
  color: inherit !important;
}

body.va-dark .elementor-widget-image img {
  opacity: 0.9;
}

body.va-dark .elementor-icon-list-text {
  color: var(--vara-text) !important;
}

body.va-dark .elementor-icon-list-icon i {
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-tab-title {
  background-color: var(--vara-surface-container) !important;
  color: var(--vara-text) !important;
  border-color: var(--vara-border) !important;
}

body.va-dark .elementor-tab-title.elementor-active {
  background-color: var(--vara-surface-container-high) !important;
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-tab-content {
  background-color: var(--vara-surface) !important;
  color: var(--vara-text) !important;
  border-color: var(--vara-border) !important;
}

body.va-dark .elementor-accordion-item {
  border-color: var(--vara-border) !important;
}

body.va-dark .elementor-accordion-item .elementor-tab-content {
  background-color: var(--vara-surface-container-lowest) !important;
}

body.va-dark .elementor-counter-number-wrapper {
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-counter-title {
  color: var(--vara-text) !important;
}

body.va-dark .elementor-progress-wrapper {
  background-color: var(--vara-surface-container-high) !important;
}

body.va-dark .elementor-progress-bar {
  background-color: var(--vara-primary-container) !important;
}

body.va-dark .elementor-testimonial-name {
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-testimonial-subtitle,
body.va-dark .elementor-testimonial-description {
  color: var(--vara-text) !important;
}

body.va-dark .elementor-alert {
  background-color: var(--vara-surface-container) !important;
  border-color: var(--vara-border) !important;
  color: var(--vara-text) !important;
}

body.va-dark .elementor-code-highlight pre {
  background-color: var(--vara-surface-container-lowest) !important;
  color: var(--vara-text) !important;
}

body.va-dark .elementor-widget-google_map iframe {
  filter: brightness(0.7) invert(1) contrast(0.9);
}

body.va-dark .elementor-nav-menu--main .elementor-item {
  color: var(--vara-text) !important;
}

body.va-dark .elementor-nav-menu--main .elementor-item:hover,
body.va-dark .elementor-nav-menu--main .elementor-item-active {
  color: var(--vara-primary) !important;
}

body.va-dark .elementor-share-buttons--default .elementor-share-btn {
  background-color: var(--vara-surface-container) !important;
  border-color: var(--vara-border) !important;
}

body.va-dark input[type="text"],
body.va-dark input[type="email"],
body.va-dark input[type="url"],
body.va-dark input[type="tel"],
body.va-dark input[type="number"],
body.va-dark input[type="date"],
body.va-dark textarea,
body.va-dark select {
  background-color: var(--vara-surface-container-high) !important;
  border-color: var(--vara-border) !important;
  color: var(--vara-text) !important;
}

body.va-dark input:focus,
body.va-dark textarea:focus,
body.va-dark select:focus {
  border-color: var(--vara-primary) !important;
  box-shadow: 0 0 0 3px var(--vara-focus-ring) !important;
}

body.va-dark input::placeholder,
body.va-dark textarea::placeholder {
  color: var(--vara-text-muted) !important;
}

body.va-dark .widget-title,
body.va-dark h2.widget-title,
body.va-dark h3.widget-title,
body.va-dark h4.widget-title {
  color: var(--vara-text-heading) !important;
}

body.va-dark .widget {
  color: var(--vara-text) !important;
}

body.va-dark .wp-block {
  color: var(--vara-text) !important;
}

body.va-dark .wp-block-heading {
  color: var(--vara-text-heading) !important;
}

body.va-dark .tablepress tbody td {
  background-color: var(--vara-surface-container) !important;
  color: var(--vara-text) !important;
  border-color: var(--vara-border) !important;
}

body.va-dark .tablepress thead th {
  background-color: var(--vara-surface-container-high) !important;
  color: var(--vara-text-heading) !important;
  border-color: var(--vara-border) !important;
}

body.va-dark .wpcf7 input,
body.va-dark .wpcf7 textarea,
body.va-dark .wpcf7 select {
  background-color: var(--vara-surface-container-high) !important;
  border-color: var(--vara-border) !important;
  color: var(--vara-text) !important;
}

body.va-dark .wpcf7-label {
  color: var(--vara-text) !important;
}

/* ==========================================================================
   Preserve #7c3aed — only on normal state bg/color, NOT hover/focus/active
   Any element that uses #7c3aed as background or text color keeps it in dark mode.
   ========================================================================== */

/* Theme elements with #7c3aed background or color */
body.va-dark .vara-saas-btn-build,
body.va-dark .vara-saas-button-primary,
body.va-dark .vara-saas-scroll-top,
body.va-dark .vara-saas-pricing-badge {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

body.va-dark .vara-saas-logo a,
body.va-dark .vara-saas-footer-brand,
body.va-dark .vara-saas-overline,
body.va-dark .vara-saas-footer-col-title {
  color: #a78bfa !important;
}

/* Elementor elements with inline #7c3aed (set in Elementor editor) */
body.va-dark [style*="#7c3aed"],
body.va-dark [style*="#7C3AED"] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

body.va-dark [style*="color: #7c3aed"],
body.va-dark [style*="color:#7c3aed"],
body.va-dark [style*="color: #7C3AED"],
body.va-dark [style*="color:#7C3AED"] {
  color: #a78bfa !important;
  background-color: transparent !important;
}

body.va-dark [style*="background-color: #7c3aed"],
body.va-dark [style*="background-color:#7c3aed"],
body.va-dark [style*="background-color: #7C3AED"],
body.va-dark [style*="background-color:#7C3AED"] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

/* Elementor Global Color "Primary" (#7c3aed) used via CSS variables */
body.va-dark .elementor-widget [style*="#7c3aed"],
body.va-dark .elementor-widget [style*="#7C3AED"] {
  color: #a78bfa !important;
}

body.va-dark .elementor-widget [style*="background-color: #7c3aed"],
body.va-dark .elementor-widget [style*="background-color:#7c3aed"],
body.va-dark .elementor-widget [style*="background-color: #7C3AED"],
body.va-dark .elementor-widget [style*="background-color:#7C3AED"] {
  background-color: #7c3aed !important;
  color: #ffffff !important;
}

/* @media fallback */
@media (prefers-color-scheme: dark) {
  body:not(.va-light):not(.va-dark) .vara-saas-btn-build,
  body:not(.va-light):not(.va-dark) .vara-saas-button-primary,
  body:not(.va-light):not(.va-dark) .vara-saas-scroll-top,
  body:not(.va-light):not(.va-dark) .vara-saas-pricing-badge {
    background-color: #7c3aed !important;
    color: #ffffff !important;
  }

  body:not(.va-light):not(.va-dark) .vara-saas-logo a,
  body:not(.va-light):not(.va-dark) .vara-saas-footer-brand,
  body:not(.va-light):not(.va-dark) .vara-saas-overline,
  body:not(.va-light):not(.va-dark) .vara-saas-footer-col-title {
    color: #a78bfa !important;
  }

  body:not(.va-light):not(.va-dark) [style*="#7c3aed"],
  body:not(.va-light):not(.va-dark) [style*="#7C3AED"] {
    background-color: #7c3aed !important;
    color: #ffffff !important;
  }

  body:not(.va-light):not(.va-dark) [style*="color: #7c3aed"],
  body:not(.va-light):not(.va-dark) [style*="color:#7c3aed"],
  body:not(.va-light):not(.va-dark) [style*="color: #7C3AED"],
  body:not(.va-light):not(.va-dark) [style*="color:#7C3AED"] {
    color: #a78bfa !important;
    background-color: transparent !important;
  }

  body:not(.va-light):not(.va-dark) [style*="background-color: #7c3aed"],
  body:not(.va-light):not(.va-dark) [style*="background-color:#7c3aed"],
  body:not(.va-light):not(.va-dark) [style*="background-color: #7C3AED"],
  body:not(.va-light):not(.va-dark) [style*="background-color:#7C3AED"] {
    background-color: #7c3aed !important;
    color: #ffffff !important;
  }

  body:not(.va-light):not(.va-dark) .elementor-widget [style*="#7c3aed"],
  body:not(.va-light):not(.va-dark) .elementor-widget [style*="#7C3AED"] {
    color: #a78bfa !important;
  }

  body:not(.va-light):not(.va-dark) .elementor-widget [style*="background-color: #7c3aed"],
  body:not(.va-light):not(.va-dark) .elementor-widget [style*="background-color:#7c3aed"],
  body:not(.va-light):not(.va-dark) .elementor-widget [style*="background-color: #7C3AED"],
  body:not(.va-light):not(.va-dark) .elementor-widget [style*="background-color:#7C3AED"] {
    background-color: #7c3aed !important;
    color: #ffffff !important;
  }
}