:root {
  color-scheme: light;
  --tenant-primary: #3157D5;
  --tenant-primary-hover: #2B4CBD;
  --tenant-primary-subtle: #E9EDFB;
  --tenant-primary-border: #B8C3EE;
  --tenant-on-primary: #FFFFFF;
  --tenant-secondary: #12233F;
  --tenant-secondary-hover: #293950;
  --tenant-secondary-subtle: #ECEEF1;
  --tenant-on-secondary: #FFFFFF;
  --color-canvas: #F4F6FA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FEFEFF;
  --color-text: #172033;
  --color-text-muted: #5D6878;
  --color-border: #D8DEE8;
  --color-link: #2447B8;
  --color-focus: #3157D5;
  --color-success: #1F8B4C;
  --color-warning: #A66700;
  --color-error: #B42318;
  --color-info: #2563EB;
  --color-on-success: #FFFFFF;
  --color-on-warning: #FFFFFF;
  --color-on-error: #FFFFFF;
  --color-on-info: #FFFFFF;

  --font-ui: "Open Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --type-xs: 0.75rem;
  --type-sm: 0.8125rem;
  --type-md: 0.875rem;
  --type-lg: 1rem;
  --type-xl: 1.25rem;
  --type-2xl: 1.5rem;
  --type-3xl: 2rem;
  --type-4xl: 3rem;
  --type-4xl: 3rem;
  --type-4xl: 3rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-edge: 0.125rem;
  --radius-compact: 0.25rem;
  --radius-control: 0.625rem;
  --radius-surface: 0.875rem;
  --radius-dialog: 1rem;
  --radius-pill: 999px;

  --shadow-low: 0 6px 20px rgba(18, 35, 63, 0.07);
  --shadow-medium: 0 14px 38px rgba(18, 35, 63, 0.11);
  --shadow-high: 0 24px 64px rgba(18, 35, 63, 0.16);
  --duration-fast: 150ms;
  --duration-standard: 210ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Aliases temporales para las capas existentes. */
  --brand-primary: var(--tenant-primary);
  --brand-secondary: var(--tenant-secondary);
  --brand-bg: var(--color-canvas);
  --brand-surface: var(--color-surface);
  --brand-on-primary: var(--tenant-on-primary);
  --brand-text: var(--color-text);
  --brand-link: var(--color-link);
  --brand-button: var(--tenant-primary);
  --yellow: var(--tenant-primary);
  --yellow-hover: var(--tenant-primary-hover);
  --black: var(--tenant-secondary);
  --white: var(--color-surface);
  --bg: var(--color-canvas);
  --text: var(--color-text-muted);
  --border: var(--color-border);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --info: var(--color-info);
  --shadow: var(--shadow-medium);
}

html {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-ui);
}

body {
  color: var(--color-text);
  font-family: var(--font-ui);
}

body:not(.login-page) {
  background: var(--color-canvas);
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

::selection {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

:where(a) {
  color: var(--color-link);
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 34%, transparent);
  outline-offset: 2px;
}

:where(input, select, textarea) {
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}

:where(input, select, textarea):focus-visible {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--color-text-muted) 74%, transparent);
}

.sidebar {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
  border-right-color: color-mix(in srgb, var(--tenant-on-secondary) 14%, transparent);
}

.brand-mark {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.nav-item {
  color: color-mix(in srgb, var(--tenant-on-secondary) 84%, transparent);
}

.nav-item:hover,
.nav-item.active,
.nav-item[aria-current="page"] {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.nav-group > summary {
  color: color-mix(in srgb, var(--tenant-on-secondary) 72%, transparent);
}

.btn,
.tab,
.nav-item {
  border-radius: var(--radius-control);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.btn.primary,
.tab.active {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
  border-color: var(--tenant-primary);
}

.btn.primary:hover,
.tab.active:hover {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary-hover);
  border-color: var(--tenant-primary-hover);
}

.btn.dark {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
}

.btn.dark:hover {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary-hover);
}

.btn.ghost,
.tab:not(.active) {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.btn[disabled],
.tab[disabled],
.nav-item[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.panel,
.table-wrap,
.filters-panel,
.empty-state,
.catalog-filters,
.dialog-card,
.catalog-card,
.topbar {
  color: var(--color-text);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.panel,
.topbar,
.dialog-card {
  box-shadow: var(--shadow-low);
}

.badge.success,
.status-pill.success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

.badge.warning,
.status-pill.warning {
  color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 13%, var(--color-surface));
}

.badge.error,
.status-pill.error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 11%, var(--color-surface));
}

.badge.info,
.status-pill.info {
  color: var(--color-info);
  background: color-mix(in srgb, var(--color-info) 11%, var(--color-surface));
}

.badge.neutral,
.status-pill.neutral {
  color: var(--color-text-muted);
  background: var(--tenant-secondary-subtle);
}

.theme-accent-surface {
  color: var(--tenant-on-primary);
  background: var(--tenant-primary);
}

.theme-secondary-surface {
  color: var(--tenant-on-secondary);
  background: var(--tenant-secondary);
}

.theme-subtle-surface {
  color: var(--color-text);
  background: var(--tenant-primary-subtle);
  border: 1px solid var(--tenant-primary-border);
}

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

@media (forced-colors: active) {
  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid CanvasText;
  }
}