/* ============================================================
   tokens.css — VistoBIM · marca v2 (rebranding 18/09/2026)
   Fuente única de verdad: VistoBIM/marca/VistoBIM-marca-colores-logo-tipografia.txt
   y VistoBIM/REBRANDING-SPEC.md. Si cambia la marca, se cambia ACÁ y en la app.

   Los nombres nuevos son los de la ficha (brand / ink / obra). Debajo quedan
   los nombres viejos como ALIAS, para no reescribir las ~200 referencias de
   estilo.css: ningún hex suelto sobrevive, solo cambia a qué apunta cada alias.
   ============================================================ */

:root {
  /* ---------- CIAN VISTOBIM · el único acento ---------- */
  --brand-050: #EFFAFB;
  --brand-100: #D3F2F6;
  --brand-300: #7FE0E9;   /* anillo de foco */
  --brand-400: #3ECFDD;   /* hover · cifras y enlaces sobre oscuro */
  --brand-500: #10B3C4;   /* principal: botones, "BIM" del logo, cotas */
  --brand-600: #0A8B9B;   /* press */
  --brand-700: #07687A;   /* cian sobre fondo claro */
  --brand-500-rgb: 16, 179, 196;

  /* ---------- GRAFITO · la base del producto ---------- */
  --ink-999: #06080A;   /* lienzo 3D */
  --ink-950: #0B0E12;   /* fondo de la app y del sitio — ESTE es "el negro" */
  --ink-900: #12161B;   /* paneles y tarjetas */
  --ink-800: #1A2027;   /* hover, inputs, divisores suaves */
  --ink-700: #2B343D;   /* bordes */
  --ink-500: #6B7A88;   /* solo placeholders */
  --ink-300: #95A3B1;   /* texto secundario sobre oscuro */
  --ink-200: #C3CDD6;   /* cuerpo sobre tarjetas */
  --ink-100: #ECF0F3;   /* texto principal · "VISTO" del logo */

  /* ---------- CLARO (por si alguna pieza va en claro) ---------- */
  --superficie-clara: #F5F7F9;
  --texto-claro: #0B0E12;

  /* ---------- NARANJA OBRA · acento secundario ----------
     Uso muy puntual: cifras grandes destacadas sobre grafito.
     NUNCA en botones y NUNCA como color de estado. Hoy el sitio no lo usa. */
  --obra-400: #FF8A3D;
  --obra-500: #F76B15;

  /* ---------- ESTADOS ---------- */
  --exito: #1FA971;   /* visto bueno */
  --aviso: #E8B203;   /* pendiente de revisión */
  --error: #B32D28;   /* conflicto, interferencia */

  /* ---------- Colores de DISCIPLINA (dominio, NO marca) ----------
     Vienen del visor y NO se tocan en el rebranding (REBRANDING-SPEC §1).
     Solo se usan en las ilustraciones del modelo y en la leyenda MEP. */
  --d-pluvial:    #F59E0B;
  --d-sanitaria:  #EF4444;
  --d-incendio:   #EF4444;
  --d-electrica:  #A78BFA;
  --d-agua:       #22D3EE;
  --d-estructura: #94A3B8;

  /* ---------- TIPOGRAFÍA ----------
     Saira Semi Condensed = titulares y logo · Saira = interfaz y cuerpo
     IBM Plex Mono = TODO número que sea dato, aunque esté dentro de una frase */
  --fuente:        "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulo: "Saira Semi Condensed", "Saira", system-ui, -apple-system, sans-serif;
  --fuente-mono:   "IBM Plex Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;

  /* ---------- Espaciado (grid 4px), radios y elevación ---------- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e6: 24px; --e8: 32px; --e12: 48px; --e16: 64px;
  --r-control: 8px;
  --r-tarjeta: 12px;
  --r-grande:  16px;
  --r-pill:    999px;

  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 4px 16px -4px rgba(0,0,0,.5);
  --sombra-3: 0 24px 56px -16px rgba(0,0,0,.7);

  --ancho: 1160px;
  --transicion: 180ms cubic-bezier(.2,.7,.3,1);

  /* ============================================================
     ALIAS heredados — los que usa estilo.css. No agregar más:
     lo nuevo se escribe con los nombres de arriba.
     ============================================================ */
  --fondo:        var(--ink-950);
  --superficie:   var(--ink-900);
  --superficie-2: var(--ink-800);
  --borde:        var(--ink-700);
  --borde-suave:  var(--ink-800);
  --texto:        var(--ink-100);
  --texto-2:      var(--ink-300);
  --texto-3:      var(--ink-500);
  --texto-medio:  var(--ink-200);

  --visto:        var(--brand-500);
  --visto-fuerte: var(--brand-600);
  --visto-claro:  var(--brand-400);
  --visto-rgb:    var(--brand-500-rgb);
}