/* ==========================================================================
   tokens-neutral.css — Grises neutros (estilo zinc) + líneas 1px
   Cargar DESPUÉS de tokens.css. Mantiene los MISMOS nombres de tokens:
   solo cambian los valores, así nada se rompe. Acento carmín intacto.
   ========================================================================== */
:root {
  /* Neutros */
  --gray-0:   #FFFFFF;  /* fondo principal */
  --gray-50:  #F7F7F8;  /* tarjetas / superficies */
  --gray-100: #F3F4F6;  /* superficie hover / chips */
  --gray-200: #E4E4E7;  /* líneas y bordes */
  --gray-300: #D4D4D8;  /* líneas fuertes / timeline */
  --gray-500: #71717A;  /* texto secundario (muted) */
  --gray-900: #18181B;  /* texto principal (nunca negro puro) */
  --gray-800: #27272A;  /* bloques invertidos */

  /* Tokens existentes → valores neutros */
  --color-bg: var(--gray-0);
  --color-text: var(--gray-900);
  --color-text-2: var(--gray-500);
  --color-text-3: var(--gray-500);
  --color-paper: var(--gray-50);
  --color-muted: var(--gray-500);
  --color-surface: var(--gray-50);
  --color-surface-strong: var(--gray-100);
  --color-border: var(--gray-200);
  --color-card-bg: var(--gray-50);
  --color-card-border: var(--gray-200);
  --color-chip-bg: var(--gray-100);
  --color-chip-border: var(--gray-200);
  --color-timeline: var(--gray-300);
  /* acento: SIN cambios (--color-accent #7F0F1D, --color-accent-deep #520E0D) */

  /* Líneas: 1px sólidas siempre */
  --line-w: 1px;
  --line: 1px solid var(--color-border);

  /* Radios (12–16px en contenedores) y sombras mínimas */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-hover: 0 4px 14px rgba(24, 24, 27, 0.08);

  /* Alias de tema usados por body/html */
  --theme-bg: var(--color-bg);
  --theme-text: var(--color-text);
  --theme-accent: var(--color-accent);
  --theme-accent-deep: var(--color-accent-deep);
  --theme-border: var(--color-border);
  --theme-surface: var(--color-surface);
  --theme-surface-strong: var(--color-surface-strong);
}

html[data-theme="dark"] {
  --gray-0:   #18181B;
  --gray-50:  #27272A;
  --gray-100: #313136;
  --gray-200: #3F3F46;
  --gray-300: #52525B;
  --gray-500: #A1A1AA;
  --gray-900: #F4F4F5;
  --gray-800: #27272A;

  --color-bg: var(--gray-0);
  --color-text: var(--gray-900);
  --color-text-2: var(--gray-500);
  --color-text-3: var(--gray-500);
  --color-paper: var(--gray-50);
  --color-muted: var(--gray-500);
  --color-surface: var(--gray-50);
  --color-surface-strong: var(--gray-100);
  --color-border: var(--gray-200);
  --color-card-bg: var(--gray-50);
  --color-card-border: var(--gray-200);
  --color-chip-bg: rgba(211, 106, 118, 0.14);
  --color-chip-border: rgba(211, 106, 118, 0.38);
  --color-timeline: var(--gray-300);
  /* acento dark (#D36A76 / #AA3F4E): SIN cambios */

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.40);
  --pc-bar-bg: rgba(24, 24, 27, 0.85);
  --pc-bar-border: rgba(244, 244, 245, 0.18);

  /* Alias de tema para dark mode */
  --theme-bg: var(--color-bg);
  --theme-text: var(--color-text);
  --theme-border: var(--color-border);
  --theme-surface: var(--color-surface);
  --theme-surface-strong: var(--color-surface-strong);
}