/* Aparejo — color.
   Marino = estructura y texto. Amarillo de obra = acción y atención, nada más.
   Grises cálidos (pizarra/papel) = fondos y bordes. Estados = tres, inconfundibles. */
:root{
  /* Marino ------------------------------------------------------------- */
  --navy-900:#070D17;  /* fondos marinos a sangre, footers */
  --navy-800:#0F1B2D;  /* MARCA. texto principal, botón primario, cabeceras de tabla */
  --navy-700:#1B2A42;  /* hover del primario, superficies marinas elevadas */
  --navy-600:#2E3D57;  /* texto secundario sobre papel */
  --navy-500:#4A5871;  /* texto terciario, ayudas */
  --navy-400:#6E7B92;  /* texto deshabilitado sobre papel (nunca para leer) */
  --navy-200:#C7CEDB;  /* texto secundario sobre marino */
  --navy-100:#E3E7EE;

  /* Amarillo de obra ---------------------------------------------------- */
  --yellow-500:#F5B517;  /* MARCA. acción principal, foco, subrayados de atención */
  --yellow-600:#D99B00;  /* hover/press del amarillo */
  --yellow-300:#FBE08F;  /* bordes de superficies amarillas suaves */
  --yellow-100:#FFF4D6;  /* fondo de aviso / resalte de celda */
  --yellow-ink:#4A3600;  /* texto sobre amarillo. contraste 6,3:1 sobre #F5B517 */

  /* Grises cálidos (papel de obra) --------------------------------------- */
  --stone-000:#FFFFFF;
  --stone-050:#FAF9F5;  /* fondo de página */
  --stone-100:#F2F1EA;  /* fondo de zona, fila alterna, campo deshabilitado */
  --stone-200:#E5E3D9;  /* borde suave, separadores de tabla */
  --stone-300:#D2CFC2;  /* borde de campo y de tarjeta */
  --stone-400:#B0AC9C;  /* borde en hover, iconos apagados */
  --stone-500:#6E6A5C;  /* texto de apoyo sobre papel. 5,4:1 sobre blanco */

  /* Estados -------------------------------------------------------------- */
  --ok-600:#1B6B45;     /* correcto: texto e icono */
  --ok-500:#22854F;     /* correcto: relleno */
  --ok-100:#E6F2EA;     /* correcto: fondo */
  --ok-300:#A9D0BA;     /* correcto: borde */
  --warn-600:#8A4A00;   /* aviso: texto. naranja quemado, no se confunde con la marca */
  --warn-500:#B36200;
  --warn-100:#FBEEDF;
  --warn-300:#E0BE93;
  --error-600:#9E241C;  /* error: texto */
  --error-500:#C0332A;
  --error-100:#FBEAE8;
  --error-300:#E2AAA5;

  /* Alias semánticos ------------------------------------------------------ */
  --text-primary:var(--navy-800);
  --text-secondary:var(--navy-600);
  --text-muted:var(--stone-500);
  --text-disabled:var(--navy-400);
  --text-inverse:var(--stone-000);
  --text-inverse-secondary:var(--navy-200);
  --text-on-accent:var(--yellow-ink);
  --text-link:var(--navy-800);
  --text-link-hover:var(--yellow-600);

  --surface-page:var(--stone-050);
  --surface-card:var(--stone-000);
  --surface-sunken:var(--stone-100);
  --surface-inverse:var(--navy-800);
  --surface-inverse-deep:var(--navy-900);
  --surface-accent:var(--yellow-500);
  --surface-accent-soft:var(--yellow-100);
  --surface-row-alt:#FBFAF6;
  --surface-row-hover:var(--stone-100);
  --surface-row-selected:var(--yellow-100);

  --border-subtle:var(--stone-200);
  --border-default:var(--stone-300);
  --border-strong:var(--navy-800);
  --border-field:var(--stone-300);
  --border-field-hover:var(--stone-400);
  --border-inverse:#2B3A52;

  --accent:var(--yellow-500);
  --accent-hover:var(--yellow-600);
  --focus-ring:var(--yellow-500);
  --focus-ring-inverse:var(--yellow-500);
}