/* Tokens de diseño: colores (claro/oscuro), medidas y capas. Todo el resto del CSS usa solo estas variables.
   El tema lo fija assets/js/theme-init.js con data-theme="light"|"dark" en <html> (automático = según el sistema). */
:root {
  /* Color: tema claro */
  --bg: #EEEFE3;
  --surface: #FFFFFF;
  --surface-2: #F7F6EC;
  --border: #DAD8C6;
  --border-strong: #928D5F;           /* borde de controles de formulario (3:1) */
  --ink: #211D16;
  --ink-muted: #5E5949;
  --ink-faint: #6E6956;
  --accent: #B8811E;
  --accent-strong: #815917;
  --accent-text: var(--accent-strong);  /* acento como color de texto o enlace; --accent queda para fondos y bordes */
  --accent-hover: #C99028;
  --accent-soft: #F1E1BC;
  --accent2: #4B6B45;
  --accent2-soft: #E1EAD9;
  --success: #386F46;
  --success-soft: #DDEBDF;
  --warning: #845C1D;
  --warning-soft: #F3E4C8;
  --critical: #A73E2C;
  --critical-soft: #F5DCD5;
  --info: #3D6987;
  --info-soft: #DDE8EE;
  --on-accent: #2B1C05;               /* texto sobre el color de acento (botón principal) */
  --on-accent-strong: #FFFFFF;        /* texto sobre el acento oscuro (botón activo) */
  --focus: var(--accent-strong);
  --overlay: rgba(20,17,11,0.5);
  --shadow: 0 1px 2px rgba(33,29,22,0.06), 0 4px 14px rgba(33,29,22,0.08);
  color-scheme: light;

  /* Medidas */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
  --touch: 44px;                      /* alto mínimo de un control táctil */
  --topbar-h: 56px;                   /* barra superior en móvil */
  --sidebar-w: 232px;

  /* Tipografía */
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Public Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Escala tipográfica (rem; base 16 px). Nada por debajo de --fs-xs. */
  --fs-xs: 0.75rem;     /* 12: pastillas, kickers, etiquetas en mayúsculas */
  --fs-sm: 0.8125rem;   /* 13: texto secundario */
  --fs-md: 0.875rem;    /* 14: tablas, controles */
  --fs-body: 0.9375rem; /* 15: texto corriente denso */
  --fs-base: 1rem;      /* 16: texto base */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28: título de página en escritorio */

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Capas */
  --z-nav: 60;
  --z-drawer: 45;
  --z-modal: 50;
  --z-toast: 100;
}
:root[data-theme="dark"] {
  --bg: #1C1812;
  --surface: #262019;
  --surface-2: #2E271D;
  --border: #3C3427;
  --border-strong: #827155;
  --ink: #EDE8DC;
  --ink-muted: #A79E8C;
  --ink-faint: #9A927A;
  --accent: #D9A53B;
  --accent-strong: #F0BE55;
  --accent-text: var(--accent-strong);
  --accent-hover: #E8B54A;
  --accent-soft: #3D3018;
  --accent2: #86A87A;
  --accent2-soft: #263323;
  --success: #5FAE73;
  --success-soft: #223729;
  --warning: #E0A83F;
  --warning-soft: #3A2E17;
  --critical: #E37368;
  --critical-soft: #3B231F;
  --info: #6FA0C4;
  --info-soft: #1F2E37;
  --on-accent: #2B1C05;
  --on-accent-strong: #2B1C05;
  --focus: var(--accent);
  --overlay: rgba(0,0,0,0.6);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  color-scheme: dark;
}