/* tokens.css — compilado desde tokens.json (W3C DTCG). No editar valores acá sin editar el
   .json primero: este archivo es la salida, no la fuente de verdad.
   Capas: primitivo (--prim-*) -> semántico (--sem-*) -> componente (--cmp-*).
   Tema oscuro = override de los MISMOS nombres semánticos vía [data-theme="dark"]. */

:root {
  /* -- primitivos: color -- */
  --prim-neutral-0: #ffffff;
  --prim-neutral-50: #f7f8f9;
  --prim-neutral-100: #eef0f2;
  --prim-neutral-200: #dde1e6;
  --prim-neutral-300: #c3c9d1;
  --prim-neutral-400: #9aa3af;
  --prim-neutral-500: #6b7480;
  --prim-neutral-600: #4d5560;
  --prim-neutral-700: #363c45;
  --prim-neutral-800: #23272e;
  --prim-neutral-900: #15171b;
  --prim-teal-100: #d6efec;
  --prim-teal-600: #147d72;
  --prim-teal-800: #115e59;
  --prim-amber-100: #fdefd6;
  --prim-amber-700: #b45309;
  --prim-red-100: #fbe0dc;
  --prim-red-700: #b91c1c;
  --prim-emerald-100: #d6f0e3;
  --prim-emerald-700: #047857;
  --prim-violet-100: #e8e3fb;
  --prim-violet-700: #5b3fb0;

  /* -- primitivos: espaciado (grilla 8pt / 4pt) -- */
  --prim-space-1: 4px;
  --prim-space-2: 8px;
  --prim-space-3: 12px;
  --prim-space-4: 16px;
  --prim-space-5: 20px;
  --prim-space-6: 24px;
  --prim-space-8: 32px;
  --prim-space-10: 40px;
  --prim-space-16: 64px;

  /* -- primitivos: forma, tipografía, motion, elevación -- */
  --prim-radius-1: 6px;
  --prim-radius-2: 10px;
  --prim-radius-3: 16px;
  --prim-radius-full: 999px;
  --prim-font-family-base: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --prim-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --prim-font-size-1: 12px;
  --prim-font-size-2: 13.6px;
  --prim-font-size-3: 16px;
  --prim-font-size-4: 18.1px;
  --prim-font-size-5: 20.5px;
  --prim-duration-fast: 120ms;
  --prim-duration-base: 200ms;
  --prim-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --prim-shadow-panel: 0 1px 3px rgba(21, 23, 27, 0.15);
  --prim-shadow-overlay: 0 8px 24px -4px rgba(21, 23, 27, 0.24);

  /* -- semánticos (tema claro = default) -- */
  --sem-bg-superficie: var(--prim-neutral-0);
  --sem-bg-hundido: var(--prim-neutral-50);
  --sem-bg-panel: var(--prim-neutral-50);
  --sem-borde-sutil: var(--prim-neutral-200);
  --sem-texto-primario: var(--prim-neutral-900);
  --sem-texto-secundario: var(--prim-neutral-600);
  --sem-texto-terciario: var(--prim-neutral-500);
  --sem-accion-primaria: var(--prim-teal-800);
  --sem-accion-primaria-fg: var(--prim-neutral-0);
  --sem-burbuja-agente-bg: var(--prim-neutral-100);
  --sem-burbuja-agente-fg: var(--prim-neutral-900);
  --sem-burbuja-usuario-bg: var(--prim-teal-800);
  --sem-burbuja-usuario-fg: var(--prim-neutral-0);
  --sem-burbuja-humano-bg: var(--prim-violet-100);
  --sem-burbuja-humano-fg: var(--prim-neutral-900);
  --sem-estado-ok-bg: var(--prim-emerald-100);
  --sem-estado-ok-fg: var(--prim-emerald-700);
  --sem-estado-error-bg: var(--prim-red-100);
  --sem-estado-error-fg: var(--prim-red-700);
  --sem-estado-atencion-bg: var(--prim-amber-100);
  --sem-estado-atencion-fg: var(--prim-amber-700);
  --sem-estado-humano-bg: var(--prim-violet-100);
  --sem-estado-humano-fg: var(--prim-violet-700);
  --sem-inline-sm: var(--prim-space-2);
  --sem-inline-md: var(--prim-space-4);
  --sem-stack-md: var(--prim-space-4);
  --sem-layout-gutter: var(--prim-space-6);
  --sem-radius-burbuja: var(--prim-radius-3);
  --sem-radius-control: var(--prim-radius-2);
  --sem-radius-chip: var(--prim-radius-full);
  --sem-elevation-panel: var(--prim-shadow-panel);
  --sem-elevation-overlay: var(--prim-shadow-overlay);
  --sem-motion-transicion-estado: var(--prim-duration-base);

  /* -- componente -- */
  --cmp-burbuja-padding-inline: var(--sem-inline-md);
  --cmp-burbuja-padding-block: var(--sem-inline-sm);
  --cmp-input-min-height: 44px;
  --cmp-panel-width: 320px;
  --cmp-panel-padding: var(--sem-layout-gutter);
  --cmp-boton-icono-size: 40px;
}

/* tema oscuro: override de los mismos nombres semánticos — nunca un árbol paralelo */
:root[data-theme="dark"] {
  --sem-bg-superficie: var(--prim-neutral-900);
  --sem-bg-hundido: var(--prim-neutral-800);
  --sem-bg-panel: var(--prim-neutral-800);
  --sem-borde-sutil: var(--prim-neutral-700);
  --sem-texto-primario: var(--prim-neutral-50);
  --sem-texto-secundario: var(--prim-neutral-300);
  --sem-texto-terciario: var(--prim-neutral-400);
  --sem-accion-primaria: var(--prim-teal-600);
  --sem-burbuja-agente-bg: var(--prim-neutral-700);
  --sem-burbuja-agente-fg: var(--prim-neutral-50);
  --sem-burbuja-usuario-bg: var(--prim-teal-600);
  --sem-burbuja-humano-bg: #332a5c;
  --sem-burbuja-humano-fg: var(--prim-neutral-50);
  --sem-estado-humano-bg: #2a2346;
  --sem-estado-humano-fg: var(--prim-violet-100);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sem-bg-superficie: var(--prim-neutral-900);
    --sem-bg-hundido: var(--prim-neutral-800);
    --sem-bg-panel: var(--prim-neutral-800);
    --sem-borde-sutil: var(--prim-neutral-700);
    --sem-texto-primario: var(--prim-neutral-50);
    --sem-texto-secundario: var(--prim-neutral-300);
    --sem-texto-terciario: var(--prim-neutral-400);
    --sem-accion-primaria: var(--prim-teal-600);
    --sem-burbuja-agente-bg: var(--prim-neutral-700);
    --sem-burbuja-agente-fg: var(--prim-neutral-50);
    --sem-burbuja-usuario-bg: var(--prim-teal-600);
    --sem-burbuja-humano-bg: #332a5c;
    --sem-burbuja-humano-fg: var(--prim-neutral-50);
    --sem-estado-humano-bg: #2a2346;
    --sem-estado-humano-fg: var(--prim-violet-100);
  }
}