/* tokens.css — Variables del sistema de diseño.
 * Inspirado en la paleta del libro: cápsulas coloreadas por sección alfabética,
 * fondo crema, tipografía limpia.
 */

:root {
  /* Paleta por sección alfabética */
  --c-A: #F39200;
  --c-B: #F39200;
  --c-C: #E94E1B;
  --c-D: #E63027;
  --c-E: #C8102E;
  --c-F: #C8102E;
  --c-G: #7D3C98;
  --c-H: #4FB3D9;
  --c-I: #4FB3D9;
  --c-J: #7D2248;
  --c-K: #3DA5D9;
  --c-L: #1B998B;
  --c-M: #00A19A;
  --c-N: #00A19A;
  --c-O: #5DA271;
  --c-P: #5DA271;
  --c-Q: #7D6B91;
  --c-R: #7D6B91;
  --c-S: #A65C8C;
  --c-T: #8B5A3C;
  --c-U: #6B4423;
  --c-V: #5C5C5C;
  --c-W: #5C5C5C;
  --c-X: #3F3F3F;
  --c-Y: #3F3F3F;
  --c-Z: #3F3F3F;

  /* Tonos neutros (modo claro) */
  --bg:           #fdf9f1;
  --bg-elev:     #ffffff;
  --bg-soft:     #faf3e6;
  --bg-sunken:   #f4ecd8;
  --ink:          #1f1d1a;
  --ink-soft:    #4b4842;
  --ink-mute:    #837e74;
  --line:         #e6dec9;
  --line-strong: #c9bea2;

  /* Estados */
  --ok:           #2ea864;
  --ok-bg:       #e7f6ec;
  --ko:           #dc3545;
  --ko-bg:       #fdecee;
  --warn:         #d97706;
  --warn-bg:     #fff5d6;
  --info:         #2563eb;
  --info-bg:     #e3edff;

  /* Tipografía */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* Tamaños */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --shadow-1: 0 1px 2px rgba(20, 14, 0, 0.06), 0 2px 4px rgba(20, 14, 0, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 14, 0, 0.08), 0 2px 4px rgba(20, 14, 0, 0.04);
  --shadow-3: 0 12px 30px rgba(20, 14, 0, 0.14);

  --topbar-h: 60px;
  --sidebar-w: 220px;
  --content-max: 1320px;
}

/* Modo oscuro: opcional, basado en preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #14110d;
    --bg-elev:     #1c1814;
    --bg-soft:     #1a1612;
    --bg-sunken:   #110e0a;
    --ink:          #f3ead6;
    --ink-soft:    #d6cdb8;
    --ink-mute:    #968b73;
    --line:         #2d2620;
    --line-strong: #43382c;
    --ok-bg: #133923;
    --ko-bg: #3a141a;
    --warn-bg: #3a2c10;
    --info-bg: #14233f;
  }
}

/* Override manual del usuario (toggle) */
[data-theme="light"] {
  color-scheme: light;
  --bg:           #fdf9f1;
  --bg-elev:     #ffffff;
  --bg-soft:     #faf3e6;
  --bg-sunken:   #f4ecd8;
  --ink:          #1f1d1a;
  --ink-soft:    #4b4842;
  --ink-mute:    #837e74;
  --line:         #e6dec9;
  --line-strong: #c9bea2;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           #14110d;
  --bg-elev:     #1c1814;
  --bg-soft:     #1a1612;
  --bg-sunken:   #110e0a;
  --ink:          #f3ead6;
  --ink-soft:    #d6cdb8;
  --ink-mute:    #968b73;
  --line:         #2d2620;
  --line-strong: #43382c;
}