/*
 * Tokens corporativos · v1.0.0 (versión estable aprobada, DC-12, 2026-10-25)
 * Sistema aprobado conceptualmente (DC-01). Ajustes de accesibilidad aprobados (DC-03).
 * Fuente visual: docs/fase-0/17-prototipo-opcion-b.html (D-30).
 * Este archivo es la referencia. Cada aplicación copia esta versión a su repositorio
 * cuando se autorice (ver 06-estrategia.md); no se importa desde aquí ni desde una URL.
 * Lista de nombres para la prueba de consistencia: tokens-nombres.txt. Cambios: CHANGELOG.md.
 *
 * Tres capas:
 *   1. Primitivos     --p-*                      valores crudos; ninguna pantalla los usa directamente
 *   2. Semánticos     --color-* --fs-* --sp-* --r-* --sh --z-* --dur-*   lo que usan los componentes
 *   3. Tema de marca  [data-tema] [data-esquema] [data-superficie]
 */

:root {
  /* ---------- 1. Primitivos ---------- */
  --p-indigo-50: #eef0ff;
  --p-indigo-100: #e0e3ff;
  --p-indigo-500: #4f46e5;
  --p-indigo-600: #4338ca;
  --p-teal-500: #0f9488;
  --p-teal-700: #0d7c72;      /* verde azulado para texto, 5,07:1 */

  --p-gris-900: #111827;
  --p-gris-600: #4b5563;
  --p-gris-500: #6b7280;      /* DC-03: sustituye #7c8595 (3,72:1 → 4,83:1) */
  --p-gris-400: #8b94a3;      /* DC-03: borde de controles interactivos, 3,06:1 */
  --p-gris-200: #e5e8ef;
  --p-gris-100: #f0f2f6;
  --p-gris-50: #f6f7fb;
  --p-blanco: #ffffff;

  /* ---------- 2. Semánticos: color ---------- */
  --color-acc: var(--p-indigo-500);
  --color-acc-hover: var(--p-indigo-600);
  --color-acc-suave: var(--p-indigo-50);
  --color-acc-anillo: var(--p-indigo-100);
  --color-sobre-acc: var(--p-blanco);
  --color-decorativo: var(--p-teal-500);   /* sólo degradados, nunca texto */

  --color-texto: var(--p-gris-900);
  --color-texto-2: var(--p-gris-600);
  --color-texto-3: var(--p-gris-500);
  /* Bordes decorativos (tarjetas, tablas, separadores): se conservan como en la Opción B */
  --color-borde: var(--p-gris-200);
  --color-borde-suave: var(--p-gris-100);
  /* Borde de controles interactivos (campos, selectores, casillas, chips de filtro): DC-03 */
  --color-borde-control: var(--p-gris-400);
  --color-fondo: var(--p-gris-50);
  --color-superficie: var(--p-blanco);
  --color-superficie-hover: #f8f9ff;
  --color-encabezado-tabla: #fafbfd;
  --color-fila-sel: #f2f3ff;

  --color-ok: #147a52;    --color-ok-bg: #e6f6ee;
  --color-warn: #9a5800;  --color-warn-bg: #fff2d9;
  --color-bad: #bf2530;   --color-bad-bg: #fdebec;
  --color-info: #3b4fd8;  --color-info-bg: #eef0ff;
  --color-off: #5f6b7d;   --color-off-bg: #eef0f4;

  --color-oscuro: #111827;          /* toast, barra masiva, tooltip */
  --color-velo-cajon: #11182740;
  --color-velo-modal: #11182766;

  /* ---------- Tipografía (Inter alojada localmente; ver guía §3.1) ---------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-normal: 400; --fw-medio: 500; --fw-semi: 600; --fw-negrita: 700;
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 19px;
  --fs-2xl: 24px;
  --fs-3xl: 26px;
  --lh-ajustada: 1.2;
  --lh-normal: 1.5;

  /* ---------- Espaciado ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gap-grid: 14px;
  --alto-fila: 36px;
  --tactil-min: 44px;           /* móvil */
  --tactil-kiosco: 72px;        /* kiosco */

  /* ---------- Radios ---------- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r: 12px;
  --r-lg: 16px; --r-xl: 18px; --r-pill: 999px;

  /* ---------- Elevación ---------- */
  --sh: 0 1px 2px #1118270d, 0 1px 3px #1118270f;
  --sh-lg: 0 12px 32px #11182724;
  --z-top: 10; --z-menu: 20; --z-velo: 40; --z-cajon: 41;
  --z-nav-movil: 45; --z-modal: 50; --z-toast: 60;

  /* ---------- Movimiento ---------- */
  --dur-rapida: 150ms;
  --dur-normal: 250ms;

  /* ---------- Estructura ---------- */
  --lateral: 244px;
  --lateral-mini: 72px;
  --ancho-max: 1440px;
  --quiebre-tableta: 1180px;    /* referencia; las media queries no aceptan variables */
  --quiebre-movil: 760px;

  /* ---------- Foco ---------- */
  --foco-contorno: 2px solid var(--color-acc);
  --foco-desplazamiento: 2px;
  --foco-anillo: 0 0 0 3px var(--color-acc-anillo);
}

/* ---------- 3. Temas de marca ---------- */

/* HAMA Wallet · SÓLO REFERENCIA (DC-05). La fuente de verdad es HaMa-Wallet/panel/src/estilos.css,
   según su Manual de identidad v1.0. Aquí se muestran sus valores actuales con los nombres corporativos;
   no se proponen cambios desde este repositorio. Los fondos *-bg no existen en HAMA: sólo se derivan
   para el prototipo comparativo. */
[data-tema="hama"] {
  color-scheme: dark;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --color-acc: #ffffff;
  --color-acc-hover: #d4d5d8;
  --color-acc-suave: #343439;
  --color-acc-anillo: rgba(255, 255, 255, .35);
  --color-sobre-acc: #1c1c1e;
  --color-decorativo: #5b5c60;

  --color-texto: #ffffff;
  --color-texto-2: #a3a4a8;
  --color-texto-3: #7d7e83;
  --color-borde: #38393e;
  --color-borde-suave: #2c2c30;
  --color-borde-control: #4a4b51;
  --color-fondo: #1c1c1e;
  --color-superficie: #242427;
  --color-superficie-hover: #2c2c30;
  --color-encabezado-tabla: #2c2c30;
  --color-fila-sel: #343439;

  --color-ok: #2fa784;   --color-ok-bg: #1a2e28;
  --color-warn: #e2b04a; --color-warn-bg: #3a3122;
  --color-bad: #e5484d;  --color-bad-bg: #2a1d1f;
  --color-info: #3b8fd4; --color-info-bg: #1b2430;
  --color-off: #a3a4a8;  --color-off-bg: #2c2c30;

  --color-oscuro: #000000;
  --sh: none;
  --sh-lg: 0 12px 40px rgba(0, 0, 0, .45);
  --lateral: 248px;
}

/* Oscuro corporativo: definido, NO activado en ninguna aplicación hasta probarlo. */
[data-esquema="oscuro"] {
  color-scheme: dark;
  --color-acc: #818cf8;
  --color-acc-hover: #a5b4fc;
  --color-acc-suave: #1e1b4b;
  --color-acc-anillo: #312e81;
  --color-sobre-acc: #0f1320;
  --color-texto: #e5e7eb;
  --color-texto-2: #b6bcc8;
  --color-texto-3: #9ca3af;
  --color-borde: #262c3b;
  --color-borde-suave: #1b2030;
  --color-borde-control: #6b7489;
  --color-fondo: #0f1320;
  --color-superficie: #151a28;
  --color-superficie-hover: #1b2132;
  --color-encabezado-tabla: #182030;
  --color-fila-sel: #1e1b4b;
  --color-ok: #4ade80;   --color-ok-bg: #0f2e1f;
  --color-warn: #fbbf24; --color-warn-bg: #33260a;
  --color-bad: #f87171;  --color-bad-bg: #3a1416;
  --color-info: #93a5ff; --color-info-bg: #1c2150;
  --color-off: #9ca3af;  --color-off-bg: #1f2533;
  --sh: none;
  --sh-lg: 0 12px 32px #00000080;
}

/* Kiosco: misma identidad, escala grande. */
[data-superficie="kiosco"] {
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 64px;
  --r: 20px;
  --r-lg: 28px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-normal: 0ms; }
}