/* Learn2LAN One design foundation — shared by public, LMS, and editor surfaces. */
:root {
  color-scheme: light;
  --l2l-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --l2l-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --l2l-brand-950: #081a33;
  --l2l-brand-900: #0e2b54;
  --l2l-brand-800: #16457f;
  --l2l-brand-700: #1f5fa9;
  --l2l-brand-600: #246db8;
  --l2l-brand-500: #3d91e8;
  --l2l-signal-600: #cf7416;
  --l2l-signal-500: #f0a43b;
  --l2l-cyan-500: #28b8d5;
  --l2l-focus: #8f5700;
  --l2l-on-action: #ffffff;
  --l2l-control-border: #78879d;
  --l2l-text: #17233b;
  --l2l-text-muted: #607089;
  --l2l-canvas: #f5f7fb;
  --l2l-surface: #ffffff;
  --l2l-surface-raised: #ffffff;
  --l2l-surface-soft: #eef3f9;
  --l2l-border: #dce4ee;
  --l2l-code: #10243f;
  --l2l-code-text: #eef6ff;
  --l2l-success: #087a59;
  --l2l-warning: #925d0b;
  --l2l-danger: #ad3344;
  --l2l-shadow-sm: 0 2px 8px rgb(11 35 68 / 8%);
  --l2l-shadow-lg: 0 18px 55px rgb(8 26 51 / 18%);
  --l2l-radius-sm: 8px;
  --l2l-radius-md: 12px;
  --l2l-radius-lg: 18px;
  --l2l-space-1: .25rem;
  --l2l-space-2: .5rem;
  --l2l-space-3: .75rem;
  --l2l-space-4: 1rem;
  --l2l-space-6: 1.5rem;
  --l2l-space-8: 2rem;
  --l2l-content: 1180px;
  --l2l-motion-fast: 140ms;
  --l2l-motion-normal: 220ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --l2l-on-action: #081524;
  --l2l-control-border: #6b829d;
  --l2l-focus: #f2a93b;
  --l2l-text: #edf5ff;
  --l2l-text-muted: #adc0d8;
  --l2l-canvas: #081524;
  --l2l-surface: #0f2035;
  --l2l-surface-raised: #152942;
  --l2l-surface-soft: #1a304a;
  --l2l-border: #304862;
  --l2l-code: #050c16;
  --l2l-code-text: #e7f3ff;
  --l2l-brand-600: #62aaf2;
  --l2l-brand-500: #80bcf7;
  --l2l-cyan-500: #5ad3e8;
  --l2l-success: #62d5ad;
  --l2l-warning: #f2c36f;
  --l2l-danger: #ff91a1;
  --l2l-shadow-sm: 0 2px 10px rgb(0 0 0 / 28%);
  --l2l-shadow-lg: 0 18px 55px rgb(0 0 0 / 45%);
}

html { background: var(--l2l-canvas); }
body { color: var(--l2l-text); }

.l2l-theme-switcher {
  position: fixed;
  z-index: 11050;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: inline-flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--l2l-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--l2l-surface-raised) 92%, transparent);
  box-shadow: var(--l2l-shadow-lg);
  backdrop-filter: blur(14px);
}
.l2l-theme-switcher button {
  width: auto;
  min-width: 36px;
  min-height: 34px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--l2l-text-muted);
  font: 750 11px/1 var(--l2l-font-sans);
  cursor: pointer;
}
.l2l-theme-switcher button[aria-pressed="true"] {
  color: #fff;
  background: var(--l2l-brand-700);
}
.l2l-theme-switcher button:focus-visible {
  outline: 3px solid var(--l2l-focus);
  outline-offset: 3px;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  flex: none;
}

@media (max-width: 540px) {
  .l2l-theme-switcher button { min-width: 32px; padding-inline: 7px; font-size: 0; }
  .l2l-theme-switcher button::first-letter { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Editor and website-builder surfaces inherit dark mode without changing data. */
[data-theme="dark"] #l2l-editor-sidebar,
[data-theme="dark"] .l2l-sidebar-top,
[data-theme="dark"] .l2l-block,
[data-theme="dark"] .vb-toolbar,
[data-theme="dark"] .vb-palette,
[data-theme="dark"] .vb-inspector,
[data-theme="dark"] .vb-page-settings,
[data-theme="dark"] .vb-palette-item,
[data-theme="dark"] .vb-list-item {
  background: var(--l2l-surface) !important;
  color: var(--l2l-text) !important;
  border-color: var(--l2l-border) !important;
}
[data-theme="dark"] .vb-editor-body,
[data-theme="dark"] .vb-stage,
[data-theme="dark"] .vb-canvas-scroll,
[data-theme="dark"] .l2l-panel-note,
[data-theme="dark"] .l2l-info {
  background: var(--l2l-canvas) !important;
  color: var(--l2l-text-muted) !important;
}
[data-theme="dark"] .vb-field input,
[data-theme="dark"] .vb-field textarea,
[data-theme="dark"] .vb-field select,
[data-theme="dark"] .vb-page-settings input,
[data-theme="dark"] .l2l-field input,
[data-theme="dark"] .l2l-field select {
  background: var(--l2l-surface-raised) !important;
  color: var(--l2l-text) !important;
  border-color: var(--l2l-border) !important;
}