:root[data-tenant-theme] {
  --color-primary: #1e40af;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #384975;
  --color-primary-contrast: #ffffff;
  --color-secondary: #64748b;
  --color-secondary-light: #94a3b8;
  --color-secondary-dark: #475569;
  --color-secondary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #d97706;
  --color-background: #000000;
  --color-background-paper: #161d2f;
  --color-background-elevated: #ffffff;
  --color-background-page: #161d2f;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #ffffff;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #3b82f6;
  --font-primary: Inter, system-ui, -apple-system, sans-serif;
  --font-secondary: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --tenant-font-size-xs: 0.75rem;
  --tenant-font-size-sm: 0.875rem;
  --tenant-font-size-base: 1rem;
  --tenant-font-size-lg: 1.125rem;
  --tenant-font-size-xl: 1.25rem;
  --tenant-font-size-2xl: 1.5rem;
  --tenant-font-size-3xl: 1.875rem;
  --tenant-font-size-4xl: 2.25rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --spacing-unit: 4px;
  --spacing-0: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 16px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --border-radius-none: 0px;
  --border-radius-sm: 0.125rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-full: 9999px;
  --component-button-border-radius: 0.375rem;
  --component-button-padding: 0.5rem 1rem;
  --component-button-font-size: 1rem;
  --component-button-font-weight: 500;
  --component-card-border-radius: 0.5rem;
  --component-card-padding: 1.5rem;
  --component-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --component-input-border-radius: 0.375rem;
  --component-input-border-width: 1px;
  --component-input-padding: 0.5rem 0.75rem;
  --design-system: default;
}

/* Server-rendered tenant scope (frontend pages before hydration) */
[data-tenant-theme-scope][data-tenant-theme] {
  --color-primary: #1e40af;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #384975;
  --color-primary-contrast: #ffffff;
  --color-secondary: #64748b;
  --color-secondary-light: #94a3b8;
  --color-secondary-dark: #475569;
  --color-secondary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #d97706;
  --color-background: #000000;
  --color-background-paper: #161d2f;
  --color-background-elevated: #ffffff;
  --color-background-page: #161d2f;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #ffffff;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #3b82f6;
  --font-primary: Inter, system-ui, -apple-system, sans-serif;
  --font-secondary: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --tenant-font-size-xs: 0.75rem;
  --tenant-font-size-sm: 0.875rem;
  --tenant-font-size-base: 1rem;
  --tenant-font-size-lg: 1.125rem;
  --tenant-font-size-xl: 1.25rem;
  --tenant-font-size-2xl: 1.5rem;
  --tenant-font-size-3xl: 1.875rem;
  --tenant-font-size-4xl: 2.25rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --spacing-unit: 4px;
  --spacing-0: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 16px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --border-radius-none: 0px;
  --border-radius-sm: 0.125rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-full: 9999px;
  --component-button-border-radius: 0.375rem;
  --component-button-padding: 0.5rem 1rem;
  --component-button-font-size: 1rem;
  --component-button-font-weight: 500;
  --component-card-border-radius: 0.5rem;
  --component-card-padding: 1.5rem;
  --component-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --component-input-border-radius: 0.375rem;
  --component-input-border-width: 1px;
  --component-input-padding: 0.5rem 0.75rem;
  --design-system: default;
}

/* Editor canvas scoped variables (for visual page editor) */
.editor-canvas[data-tenant-theme] {
  --color-primary: #1e40af;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #384975;
  --color-primary-contrast: #ffffff;
  --color-secondary: #64748b;
  --color-secondary-light: #94a3b8;
  --color-secondary-dark: #475569;
  --color-secondary-contrast: #ffffff;
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #d97706;
  --color-background: #000000;
  --color-background-paper: #161d2f;
  --color-background-elevated: #ffffff;
  --color-background-page: #161d2f;
  --color-text-primary: #f9fafb;
  --color-text-secondary: #ffffff;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-border-dark: #d1d5db;
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #3b82f6;
  --font-primary: Inter, system-ui, -apple-system, sans-serif;
  --font-secondary: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: JetBrains Mono, monospace;
  --tenant-font-size-xs: 0.75rem;
  --tenant-font-size-sm: 0.875rem;
  --tenant-font-size-base: 1rem;
  --tenant-font-size-lg: 1.125rem;
  --tenant-font-size-xl: 1.25rem;
  --tenant-font-size-2xl: 1.5rem;
  --tenant-font-size-3xl: 1.875rem;
  --tenant-font-size-4xl: 2.25rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --spacing-unit: 4px;
  --spacing-0: 0px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 4px;
  --spacing-4: 8px;
  --spacing-5: 16px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 48px;
  --spacing-9: 64px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --border-radius-none: 0px;
  --border-radius-sm: 0.125rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-full: 9999px;
  --component-button-border-radius: 0.375rem;
  --component-button-padding: 0.5rem 1rem;
  --component-button-font-size: 1rem;
  --component-button-font-weight: 500;
  --component-card-border-radius: 0.5rem;
  --component-card-padding: 1.5rem;
  --component-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --component-input-border-radius: 0.375rem;
  --component-input-border-width: 1px;
  --component-input-padding: 0.5rem 0.75rem;
  --design-system: default;
}

/* Dark mode CSS variables */
html.dark :root[data-tenant-theme] {
  --color-background-dark: #1a1a1a;
  --color-background-paper-dark: #2d3444;
  --color-background-elevated-dark: #4d4d4d;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #ffffff;
}

html.dark [data-tenant-theme-scope][data-tenant-theme] {
  --color-background-dark: #1a1a1a;
  --color-background-paper-dark: #2d3444;
  --color-background-elevated-dark: #4d4d4d;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #ffffff;
}

html.dark .editor-canvas[data-tenant-theme] {
  --color-background-dark: #1a1a1a;
  --color-background-paper-dark: #2d3444;
  --color-background-elevated-dark: #4d4d4d;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-dark: #ffffff;
}

/* Apply theme to editor canvas (light mode) - scoped to editor only */
.editor-canvas[data-tenant-theme] {
  background-color: var(--color-background, #000000);
  color: var(--color-text-primary, #f9fafb);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Apply page background color within editor canvas (light mode) */
.editor-canvas[data-tenant-theme] > * {
  background-color: var(--color-background-page, #161d2f);
}

/* Apply dark mode theme to editor canvas — use the same --color-background as light mode
   so chosen theme colors (e.g. yellow) are not replaced by adaptive "darkBg" (heavy darken → brown). */
html.dark .editor-canvas[data-tenant-theme] {
  background-color: var(--color-background, #000000);
  color: var(--color-text-primary-dark, #ffffff);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Apply page background color within editor canvas (dark mode) */
html.dark .editor-canvas[data-tenant-theme] > * {
  background-color: var(--color-background-page, #161d2f);
}

/* Also apply to body for frontend pages (not in editor) */
body[data-tenant-theme]:not(.editor-canvas) {
  background-color: var(--color-background, #000000);
  color: var(--color-text-primary, #f9fafb);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

[data-tenant-theme-scope][data-tenant-theme] {
  background-color: var(--color-background, #000000);
  color: var(--color-text-primary, #f9fafb);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Apply page background color to main content area (light mode) - frontend only */
body[data-tenant-theme]:not(.editor-canvas) main {
  background-color: var(--color-background-page, #161d2f);
  
}

/* Apply dark mode theme to body - frontend only (same background token as light — see editor dark note) */
html.dark body[data-tenant-theme]:not(.editor-canvas) {
  background-color: var(--color-background, #000000);
  color: var(--color-text-primary-dark, #ffffff);
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Apply page background color to main content area (dark mode) - frontend only */
html.dark body[data-tenant-theme]:not(.editor-canvas) main {
  background-color: var(--color-background-page, #161d2f);
  
}

/* Map Tailwind font size classes to tenant theme CSS variables - scoped to tenant theme */
.editor-canvas[data-tenant-theme] .text-xs,
body[data-tenant-theme]:not(.editor-canvas) .text-xs {
  font-size: var(--tenant-font-size-xs, 0.75rem);
}
.editor-canvas[data-tenant-theme] .text-sm,
body[data-tenant-theme]:not(.editor-canvas) .text-sm {
  font-size: var(--tenant-font-size-sm, 0.875rem);
}
.editor-canvas[data-tenant-theme] .text-base,
body[data-tenant-theme]:not(.editor-canvas) .text-base {
  font-size: var(--tenant-font-size-base, 1rem);
}
.editor-canvas[data-tenant-theme] .text-lg,
body[data-tenant-theme]:not(.editor-canvas) .text-lg {
  font-size: var(--tenant-font-size-lg, 1.125rem);
}
.editor-canvas[data-tenant-theme] .text-xl,
body[data-tenant-theme]:not(.editor-canvas) .text-xl {
  font-size: var(--tenant-font-size-xl, 1.25rem);
}
.editor-canvas[data-tenant-theme] .text-2xl,
body[data-tenant-theme]:not(.editor-canvas) .text-2xl {
  font-size: var(--tenant-font-size-2xl, 1.5rem);
}
.editor-canvas[data-tenant-theme] .text-3xl,
body[data-tenant-theme]:not(.editor-canvas) .text-3xl {
  font-size: var(--tenant-font-size-3xl, 1.875rem);
}
.editor-canvas[data-tenant-theme] .text-4xl,
body[data-tenant-theme]:not(.editor-canvas) .text-4xl {
  font-size: var(--tenant-font-size-4xl, 2.25rem);
}

/* Apply font family to text elements (non-terminal themes) */
body[data-tenant-theme] h1,
body[data-tenant-theme] h2,
body[data-tenant-theme] h3,
body[data-tenant-theme] h4,
body[data-tenant-theme] h5,
body[data-tenant-theme] h6,
body[data-tenant-theme] p,
body[data-tenant-theme] span,
body[data-tenant-theme] div,
body[data-tenant-theme] a,
body[data-tenant-theme] button,
body[data-tenant-theme] input,
body[data-tenant-theme] textarea,
body[data-tenant-theme] select {
  font-family: Inter, system-ui, -apple-system, sans-serif;
}

/* Dark mode support for tenant themes - scoped to editor canvas (background matches theme picker) */
html.dark .editor-canvas[data-tenant-theme] {
  background-color: var(--color-background, #000000) !important;
  color: var(--color-text-primary-dark, #ffffff) !important;
}

html.dark body[data-tenant-theme]:not(.editor-canvas) {
  background-color: var(--color-background, #000000) !important;
  color: var(--color-text-primary-dark, #ffffff) !important;
}

/* Dark mode header text color - apply to all headers */
html.dark .editor-canvas[data-tenant-theme] h1,
html.dark .editor-canvas[data-tenant-theme] h2,
html.dark .editor-canvas[data-tenant-theme] h3,
html.dark .editor-canvas[data-tenant-theme] h4,
html.dark .editor-canvas[data-tenant-theme] h5,
html.dark .editor-canvas[data-tenant-theme] h6,
html.dark body[data-tenant-theme]:not(.editor-canvas) h1,
html.dark body[data-tenant-theme]:not(.editor-canvas) h2,
html.dark body[data-tenant-theme]:not(.editor-canvas) h3,
html.dark body[data-tenant-theme]:not(.editor-canvas) h4,
html.dark body[data-tenant-theme]:not(.editor-canvas) h5,
html.dark body[data-tenant-theme]:not(.editor-canvas) h6 {
  color: var(--color-text-primary-dark, #ffffff) !important;
}

/* Ensure headers in page content container have proper contrast in dark mode */
/* Target headers in any container within editor canvas */
html.dark .editor-canvas[data-tenant-theme] h1,
html.dark .editor-canvas[data-tenant-theme] h2,
html.dark .editor-canvas[data-tenant-theme] h3,
html.dark .editor-canvas[data-tenant-theme] h4,
html.dark .editor-canvas[data-tenant-theme] h5,
html.dark .editor-canvas[data-tenant-theme] h6,
html.dark .editor-canvas[data-tenant-theme] * h1,
html.dark .editor-canvas[data-tenant-theme] * h2,
html.dark .editor-canvas[data-tenant-theme] * h3,
html.dark .editor-canvas[data-tenant-theme] * h4,
html.dark .editor-canvas[data-tenant-theme] * h5,
html.dark .editor-canvas[data-tenant-theme] * h6 {
  color: var(--color-text-primary-dark, #ffffff) !important;
}

/* Dark mode text color overrides - scoped to editor canvas */
html.dark .editor-canvas[data-tenant-theme] .text-gray-900,
html.dark .editor-canvas[data-tenant-theme] .text-gray-800,
html.dark .editor-canvas[data-tenant-theme] .text-gray-700,
html.dark .editor-canvas[data-tenant-theme] .text-gray-600,
html.dark .editor-canvas[data-tenant-theme] .text-gray-500,
html.dark body[data-tenant-theme]:not(.editor-canvas) .text-gray-900,
html.dark body[data-tenant-theme]:not(.editor-canvas) .text-gray-800,
html.dark body[data-tenant-theme]:not(.editor-canvas) .text-gray-700,
html.dark body[data-tenant-theme]:not(.editor-canvas) .text-gray-600,
html.dark body[data-tenant-theme]:not(.editor-canvas) .text-gray-500 {
  color: var(--color-text-primary-dark, #ffffff) !important;
}

/* Dark mode background overrides - scoped to editor canvas */
html.dark .editor-canvas[data-tenant-theme] .bg-white,
html.dark .editor-canvas[data-tenant-theme] .bg-gray-50,
html.dark .editor-canvas[data-tenant-theme] .bg-gray-100,
html.dark body[data-tenant-theme]:not(.editor-canvas) .bg-white,
html.dark body[data-tenant-theme]:not(.editor-canvas) .bg-gray-50,
html.dark body[data-tenant-theme]:not(.editor-canvas) .bg-gray-100 {
  background-color: var(--color-background-dark, #1a1a1a) !important;
}

/* Dark mode border overrides - scoped to editor canvas */
html.dark .editor-canvas[data-tenant-theme] .border-gray-200,
html.dark .editor-canvas[data-tenant-theme] .border-gray-300,
html.dark body[data-tenant-theme]:not(.editor-canvas) .border-gray-200,
html.dark body[data-tenant-theme]:not(.editor-canvas) .border-gray-300 {
  border-color: var(--color-border-dark, #d1d5db) !important;
}

/* Button color overrides - apply theme primary color to buttons */
.editor-canvas[data-tenant-theme] .bg-blue-600,
.editor-canvas[data-tenant-theme] button.bg-blue-600,
.editor-canvas[data-tenant-theme] a.bg-blue-600,
body[data-tenant-theme]:not(.editor-canvas) .bg-blue-600,
body[data-tenant-theme]:not(.editor-canvas) button.bg-blue-600,
body[data-tenant-theme]:not(.editor-canvas) a.bg-blue-600 {
  background-color: var(--color-primary, #1e40af) !important;
  color: var(--color-primary-contrast, #ffffff) !important;
}

.editor-canvas[data-tenant-theme] .bg-blue-700,
.editor-canvas[data-tenant-theme] .hover\:bg-blue-700:hover,
.editor-canvas[data-tenant-theme] button:hover.bg-blue-600,
.editor-canvas[data-tenant-theme] a:hover.bg-blue-600,
body[data-tenant-theme]:not(.editor-canvas) .bg-blue-700,
body[data-tenant-theme]:not(.editor-canvas) .hover\:bg-blue-700:hover,
body[data-tenant-theme]:not(.editor-canvas) button:hover.bg-blue-600,
body[data-tenant-theme]:not(.editor-canvas) a:hover.bg-blue-600 {
  background-color: var(--color-primary-dark, #384975) !important;
  color: var(--color-primary-contrast, #ffffff) !important;
}

/* Button border color overrides */
.editor-canvas[data-tenant-theme] .border-blue-600,
.editor-canvas[data-tenant-theme] button.border-blue-600,
.editor-canvas[data-tenant-theme] a.border-blue-600,
body[data-tenant-theme]:not(.editor-canvas) .border-blue-600,
body[data-tenant-theme]:not(.editor-canvas) button.border-blue-600,
body[data-tenant-theme]:not(.editor-canvas) a.border-blue-600 {
  border-color: var(--color-primary, #1e40af) !important;
}

.editor-canvas[data-tenant-theme] .text-blue-600,
.editor-canvas[data-tenant-theme] button.text-blue-600,
.editor-canvas[data-tenant-theme] a.text-blue-600,
body[data-tenant-theme]:not(.editor-canvas) .text-blue-600,
body[data-tenant-theme]:not(.editor-canvas) button.text-blue-600,
body[data-tenant-theme]:not(.editor-canvas) a.text-blue-600 {
  color: var(--color-primary, #1e40af) !important;
}

.editor-canvas[data-tenant-theme] .hover\:bg-blue-50:hover,
.editor-canvas[data-tenant-theme] button:hover.text-blue-600,
body[data-tenant-theme]:not(.editor-canvas) .hover\:bg-blue-50:hover,
body[data-tenant-theme]:not(.editor-canvas) button:hover.text-blue-600 {
  background-color: var(--color-primary-light, #3b82f6) !important;
  opacity: 0.1;
}