/* ==========================================================================
   Design Tokens — Fuente única de colores por tema.
   Para agregar un tema nuevo:
   1. Añade un bloque [data-tema="<slug>"] con estos mismos tokens.
   2. Registra el <slug> en TEMAS dentro de reports/catalog.py.
   ========================================================================== */

:root,
[data-tema="claro"] {
  color-scheme: light;

  /* Superficies y bordes generales */
  --bg: #f5f5f3;
  --panel: #ffffff;
  --panel-subtle: #fcfcfb;
  --border: #e4e3dd;
  --hair: #efeee9;

  /* Tipografía */
  --ink: #1c2333;
  --ink-2: #52514e;
  --muted: #898781;

  /* Acento / Marca */
  --accent: #2a78d6;
  --accent-hover: #1c5cab;
  --accent-ink: #1c5cab;
  --accent-soft: #eaf2fc;
  --accent-border: #cbe0fa;
  --focus-ring: rgba(42, 120, 214, .18);

  /* Barra lateral */
  --sidebar: #16191f;
  --sidebar-ink: #c3c2b7;
  --sidebar-active: #262a33;

  /* Filtros y controles de formulario */
  --filter-bg: #e9edf4;
  --filter-border: #cdd5e1;
  --filter-sep: #c5cedc;
  --filter-label: #4a5568;
  --input-bg: #ffffff;
  --input-border: #b8c2d1;
  --input-border-hover: #94a3b8;
  --seg-bg: #dce3ee;

  /* Tablas */
  --table-head-bg: #f0efe9;
  --table-border: #d4d2c9;
  --table-zebra: #e4e9f2;
  --table-total: #e9e8e2;
  --table-hover: #cfe0f5;

  /* Gráficas (ECharts lee estos tokens vía getComputedStyle) */
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;

  /* Estados semánticos */
  --success-bg: #edf9f3;
  --success-border: #b7e4ce;
  --success-ink: #14633c;
  --danger-bg: #fdf0f0;
  --danger-border: #f1b9b9;
  --danger-ink: #9c2424;
  --admin-bg: #f2edfc;
  --admin-border: #d7c9f8;
  --admin-ink: #5433b8;
}

[data-tema="oscuro"] {
  color-scheme: dark;

  /* Superficies y bordes generales */
  --bg: #0f131a;
  --panel: #171c26;
  --panel-subtle: #1d2432;
  --border: #283040;
  --hair: #222938;

  /* Tipografía */
  --ink: #e8ecf4;
  --ink-2: #a8b2c5;
  --muted: #768196;

  /* Acento / Marca */
  --accent: #3b89eb;
  --accent-hover: #2a78d6;
  --accent-ink: #78b2ff;
  --accent-soft: #182942;
  --accent-border: #274670;
  --focus-ring: rgba(59, 137, 235, .28);

  /* Barra lateral */
  --sidebar: #0b0e14;
  --sidebar-ink: #b2bac9;
  --sidebar-active: #181f2c;

  /* Filtros y controles de formulario */
  --filter-bg: #151c28;
  --filter-border: #263246;
  --filter-sep: #263246;
  --filter-label: #9fb0c7;
  --input-bg: #0f141d;
  --input-border: #323f55;
  --input-border-hover: #4b5d7a;
  --seg-bg: #0f141d;

  /* Tablas */
  --table-head-bg: #1e2533;
  --table-border: #2d3748;
  --table-zebra: #1b2230;
  --table-total: #232c3d;
  --table-hover: #23334c;

  /* Gráficas */
  --chart-grid: #252d3d;
  --chart-axis: #3b465c;

  /* Estados semánticos */
  --success-bg: #122920;
  --success-border: #1f4d39;
  --success-ink: #6ee7b7;
  --danger-bg: #2c1518;
  --danger-border: #5c2328;
  --danger-ink: #fca5a5;
  --admin-bg: #221a3a;
  --admin-border: #3e2e6b;
  --admin-ink: #c4b5fd;
}