/* ══════════════════════════════════════════════════════════════════════
   Astrantix · Tokens de diseño (v1)
   Fuente única de color, tipografía, radios, sombras, espaciado y estados.
   Regla: ninguna pantalla nueva o migrada escribe un color, un tamaño de
   letra o un radio a mano; usa estas variables. Ver DESIGN.md.

   Fase 1: los tokens de color toman su valor de las variables históricas
   del panel (--bg, --card, --ink, --azul…), que ya cambian solas entre
   claro, oscuro y la capa premium. Por eso se declaran en <body>: es donde
   esas variables se redefinen. Cuando todas las pantallas estén migradas,
   los valores pasan a vivir aquí y las variables históricas se eliminan.
   ══════════════════════════════════════════════════════════════════════ */
body {
  /* ── Color: 10 semánticos ─────────────────────────────── */
  --tk-bg: var(--bg);                    /* fondo de la aplicación */
  --tk-surface: var(--card);             /* tarjetas, tablas, ventanas, menús */
  --tk-surface-2: var(--bg-dim);         /* encabezado de tabla, fila activa, campo inactivo */
  --tk-text: var(--ink);                 /* texto principal */
  --tk-text-2: var(--ink-2);             /* texto secundario y etiquetas */
  --tk-border: var(--line);              /* divisores y bordes de tarjeta */
  --tk-border-strong: var(--line-2);     /* bordes de campos y botones secundarios */
  --tk-accent: var(--azul-dark);         /* acción principal, enlace, foco (AA con texto blanco) */
  --tk-ok: var(--verde);                 /* hecho, registrado */
  --tk-warn: var(--ambar);               /* atención, plazo cercano */
  --tk-danger: var(--rojo);              /* error, acción destructiva */

  /* Derivados (no son colores nuevos: salen de los 10 de arriba) */
  --tk-on-accent: #fff;
  --tk-accent-hover: var(--azul);
  --tk-accent-soft: var(--azul-soft);
  --tk-ok-soft: var(--verde-soft);
  --tk-warn-soft: var(--ambar-soft);
  --tk-danger-soft: var(--rojo-soft);
  --tk-hover: color-mix(in srgb, var(--tk-text) 5%, transparent);
  --tk-selected: color-mix(in srgb, var(--tk-accent) 9%, transparent);
  --tk-scrim: rgba(8, 15, 18, .55);

  /* ── Tipografía: 5 tamaños, 3 pesos ───────────────────── */
  --tk-fs-xs: 12px;   /* tablas densas, chips, notas */
  --tk-fs-sm: 13px;   /* texto de apoyo, botones pequeños */
  --tk-fs-md: 14px;   /* cuerpo, campos, botones */
  --tk-fs-lg: 16px;   /* título de tarjeta y de ventana */
  --tk-fs-xl: 20px;   /* título de pantalla */
  --tk-lh-tight: 1.25;
  --tk-lh: 1.45;
  --tk-fw: 400;
  --tk-fw-medium: 500;
  --tk-fw-bold: 650;

  /* ── Radios: 4 ────────────────────────────────────────── */
  --tk-r-sm: 6px;     /* chips, casillas */
  --tk-r-md: 8px;     /* botones, campos, menús */
  --tk-r-lg: 12px;    /* tarjetas, ventanas */
  --tk-r-full: 999px; /* píldoras, avatares */

  /* ── Sombras: 4 ───────────────────────────────────────── */
  --tk-sh-0: none;                                                         /* plano: tarjetas con borde */
  --tk-sh-1: 0 1px 2px rgba(8, 15, 18, .08);                               /* botones, campos */
  --tk-sh-2: 0 6px 20px -4px rgba(8, 15, 18, .22);                         /* menús, tostadas */
  --tk-sh-3: 0 24px 56px -12px rgba(8, 15, 18, .42);                       /* ventanas */

  /* ── Espaciado: escala de 4 px ────────────────────────── */
  --tk-s-1: 4px;  --tk-s-2: 8px;  --tk-s-3: 12px; --tk-s-4: 16px;
  --tk-s-5: 20px; --tk-s-6: 24px; --tk-s-8: 32px; --tk-s-10: 40px;

  /* ── Medidas de control ───────────────────────────────── */
  --tk-ctl-h: 40px;      /* botón y campo estándar; mínimo de toque */
  --tk-ctl-h-sm: 32px;   /* botón dentro de una fila de tabla (ratón) */
  --tk-row-h: 52px;      /* fila de tabla de dos líneas */

  /* ── Estados ──────────────────────────────────────────── */
  --tk-focus: 0 0 0 2px var(--tk-surface), 0 0 0 4px var(--tk-accent);     /* anillo de foco visible */
  --tk-disabled: .5;                                                       /* opacidad de lo deshabilitado */
  --tk-t: 120ms ease;                                                      /* única transición: color y fondo */
}
@media (prefers-reduced-motion: reduce) { body { --tk-t: 0ms; } }