/* ============================================================================
   DPAI · Design tokens
   Única fuente de verdad del sistema visual: colores, tipografía, espaciado,
   radios y sombras. No escribir valores "a mano" en los demás archivos:
   usar siempre estas variables. Documentación: docs/design-system.md
   ========================================================================== */

:root{
  /* ── Color: identidad (tema oscuro, por defecto) ───────────────────────── */
  --carbon:#050B18;   /* fondo base            */
  --navy:#0B1A33;     /* superficie / tarjeta  */
  --navy-2:#122446;   /* superficie elevada    */
  --azul:#1E5FFF;     /* acción primaria       */
  --cian:#19C7FF;     /* acento / enlaces      */
  --nieve:#EEF3FB;    /* texto principal       */
  --bruma:#9FB0C8;    /* texto secundario      */
  --bruma-2:#8294AD;  /* texto terciario (AA sobre navy) */
  --ok:#3DDC97;       /* éxito / positivo      */

  /* ── Color: utilidades derivadas ───────────────────────────────────────── */
  --line:rgba(255,255,255,.08);  /* bordes y separadores */
  --card:var(--navy);            /* fondo de tarjeta     */
  --chip:rgba(255,255,255,.06);  /* fondo de "chip"      */

  /* ── Tipografía ────────────────────────────────────────────────────────── */
  --display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;  /* títulos */
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;  /* texto   */

  /* ── Forma y espaciado ─────────────────────────────────────────────────── */
  --r:14px;                          /* radio estándar               */
  --gutter:clamp(20px,5vw,64px);     /* margen lateral del contenido (20px en móvil) */
}

/* ── Bandas claras ─────────────────────────────────────────────────────────
   Mismos componentes, tokens invertidos. Se aplica con class="light" a una
   <section> para alternar el fondo oscuro/claro de la página.
   ────────────────────────────────────────────────────────────────────────── */
.light{
  --carbon:#FFFFFF;--navy:#FFFFFF;--navy-2:#DDE5F0;--cian:#1E5FFF;
  --nieve:#0B1A33;--bruma:#45505F;--bruma-2:#6F8098;--ok:#149A66;
  --line:#DDE5F0;--card:#FFFFFF;--chip:#E8EFFF;
  background:#F3F6FB;color:#0B1A33;
}