/**
 * Central color root. All component colors reference these variables.
 * Light theme = :root; dark theme = [data-theme="dark"].
 */
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Collaboration popover: elevate the Leptos Portal mount wrapper above the DOCX editor toolbar */
body > div:has([data-collab-portal-root]) {
  position: relative;
  z-index: var(--z-portal);
}

:root {
  /* RefluxAcademy-style palette (light theme) */
  --color-primary-bg: #1C263A;
  --color-sidebar-bg: #162030;
  --color-surface-elevated: #202B40;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #E0E6EF;
  --color-text-muted: #A3B0C7;
  --color-link-accent: #6BA7E5;
  --color-accent-orange: #F2994A;
  --color-accent-orange-hover: #E08B3D;
  --color-badge: #EB5757;
  --color-warning-banner: #C77E2A;

  /* Semantic mapping (light theme) - nav/sidebar/cards same surface, main distinct */
  --color-bg-nav: #ffffff;
  --color-bg-sidebar: #ffffff;
  --color-bg-main: #f9fafb;
  --color-text-main: #1a1a1a;
  --color-text-on-dark: #1a1a1a;
  --color-text-on-dark-muted: #4a4a4a;
  --color-border-on-dark: #c5c9ce;
  --color-surface-muted-on-dark: #d4d8dc;
  --color-interactive-hover-on-dark: #e4e8ec;
  --color-accent: #6BA7E5;
  --color-accent-hover: #5a96d4;
  /* Inline/markdown links: darker in light mode for readability */
  --color-link: #1d4ed8;
  --color-link-hover: #1e40af;
  --color-cta: #F2994A;
  --color-cta-hover: #E08B3D;
  --color-success: #16a34a;
  --color-warning-700: #b45309;
  --color-error: #dc2626;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-button-alt-bg: #ffffff;
  --color-button-alt-border: #e5e7eb;
  --color-button-alt-hover: #f3f4f6;
  --color-button-disabled-bg: #e5e7eb;
  --color-button-disabled-text: #9ca3af;
  --color-toggle-off-thumb: #6b7280;
  --color-nav-icon: #6b7280;
  --color-nav-icon-hover: #f3f4f6;
  --color-dropdown-bg: #ffffff;
  --color-dropdown-border: #e5e7eb;
  --color-dropdown-item-hover: #f3f4f6;
  --color-dropdown-item-active-bg: #f9fafb;
  --color-card-bg: #ffffff;
  --color-card-border: #e5e7eb;
  --color-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --header-height: 4.25rem;
  --color-accent-text: #fff;
  --color-overlay: rgba(0, 0, 0, 0.4);
  /* Muted/secondary copy on cards and forms (overrides Reflux nav palette above). */
  --color-text-muted: #6b7280;
  --color-border: var(--color-card-border);
  --color-surface-raised: #f3f4f6;

  /* Aliases — modules reference these names */
  --color-bg-card: var(--color-card-bg);
  --color-bg-muted: var(--color-surface-raised);
  --color-text: var(--color-text-main);
  --color-danger-bg: var(--color-danger);

  /* Layout tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-full: 9999px;

  /* Brand aliases (checkbox focus/accent) */
  --color-brand-500: var(--color-accent);
  --color-brand-600: var(--color-accent-hover);
  --color-focus: var(--color-accent);
  --color-bg-elevated: var(--color-surface-raised);
  --color-accent-strong: var(--color-accent-hover);
  --color-input-border: var(--color-card-border);
  --color-input-bg: var(--color-card-bg);
  --color-border-muted: var(--color-card-border);
  --color-surface-muted: var(--color-surface-raised);
  --color-bookmark-active: #ca8a04;

  /* Semantic tone tokens (badges, banners) */
  --tone-success-fg: #065f46;
  --tone-success-bg: #d1fae5;
  --tone-success-border: #6ee7b7;
  --tone-warning-fg: #92400e;
  --tone-warning-bg: #fef3c7;
  --tone-warning-border: #fbbf24;
  --tone-danger-fg: #7f1d1d;
  --tone-danger-bg: #fee2e2;
  --tone-danger-border: #fca5a5;
  --tone-info-fg: #1e3a5f;
  --tone-info-bg: #dbeafe;
  --tone-notice-fg: #312e81;
  --tone-notice-bg: #e0e7ff;
  --tone-critical-fg: #fef2f2;
  --tone-critical-bg: #7f1d1d;

  /* Typography */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --font-medium: 500;

  /* Shadows */
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-fab: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-drawer: 0 -10px 25px -5px rgba(0, 0, 0, 0.15), 0 -4px 10px -2px rgba(0, 0, 0, 0.05);

  /* Focus rings */
  --focus-ring: 0 0 0 2px var(--color-accent);
  --focus-ring-button: 0 0 0 4px var(--color-accent);

  /* Z-index scale */
  --z-dropdown-overlay: 40;
  --z-dropdown-panel: 50;
  --z-dropdown-panel-fixed: 60;
  --z-modal-backdrop: 9998;
  --z-modal: 9999;
  --z-modal-footer: 41;
  --z-drawer-backdrop: 9999;
  --z-drawer: 10000;
  --z-fab: 10000;
  --z-fab-indicator: 10001;
  --z-portal: 10050;
}

[data-theme="dark"] {
  /* Dark theme - nav/sidebar/cards same surface (gray-800), main (gray-900) */
  --color-bg-nav: #1f2937;
  --color-bg-sidebar: #1f2937;
  --color-bg-main: #111827;
  --color-text-main: #E0E6EF;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #A3B0C7;
  --color-border-on-dark: #2d3a52;
  --color-surface-muted-on-dark: #202B40;
  --color-interactive-hover-on-dark: #252f45;
  --color-accent: #6BA7E5;
  --color-accent-hover: #5a96d4;
  --color-link: #6BA7E5;
  --color-link-hover: #5a96d4;
  --color-cta: #F2994A;
  --color-cta-hover: #E08B3D;
  --color-success: #22c55e;
  --color-warning-700: #f59e0b;
  --color-error: #ef4444;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-button-alt-bg: #202B40;
  --color-button-alt-border: #2d3a52;
  --color-button-alt-hover: #252f45;
  --color-button-disabled-bg: #2d3a52;
  --color-button-disabled-text: #6b7280;
  --color-toggle-off-thumb: #a3b0c7;
  --color-nav-icon: #A3B0C7;
  --color-nav-icon-hover: #252f45;
  --color-dropdown-bg: #202B40;
  --color-dropdown-border: #2d3a52;
  --color-dropdown-item-hover: #252f45;
  --color-dropdown-item-active-bg: #2d3a52;
  --color-card-bg: #1f2937;
  --color-card-border: #4b5563;
  --color-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --header-height: 4.25rem;
  --color-accent-text: #fff;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-text-muted: #9ca3af;
  --color-border: var(--color-card-border);
  --color-surface-raised: #374151;

  /* Aliases — modules reference these names */
  --color-bg-card: var(--color-card-bg);
  --color-bg-muted: var(--color-surface-raised);
  --color-text: var(--color-text-main);
  --color-danger-bg: var(--color-danger);

  /* Layout tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-full: 9999px;

  /* Brand aliases (checkbox focus/accent) */
  --color-brand-500: var(--color-accent);
  --color-brand-600: var(--color-accent-hover);
  --color-focus: var(--color-accent);
  --color-bg-elevated: var(--color-surface-raised);
  --color-accent-strong: var(--color-accent-hover);
  --color-input-border: var(--color-card-border);
  --color-input-bg: var(--color-card-bg);
  --color-border-muted: var(--color-card-border);
  --color-surface-muted: var(--color-surface-raised);
  --color-bookmark-active: #ca8a04;

  /* Semantic tone tokens (badges, banners) */
  --tone-success-fg: #6ee7b7;
  --tone-success-bg: #064e3b;
  --tone-success-border: #059669;
  --tone-warning-fg: #fef3c7;
  --tone-warning-bg: #78350f;
  --tone-warning-border: #f59e0b;
  --tone-danger-fg: #fecaca;
  --tone-danger-bg: #7f1d1d;
  --tone-danger-border: #f87171;
  --tone-info-fg: #dbeafe;
  --tone-info-bg: #1e3a5f;
  --tone-notice-fg: #e0e7ff;
  --tone-notice-bg: #312e81;
  --tone-critical-fg: #fef2f2;
  --tone-critical-bg: #450a0a;
}

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