/* Hydran colour system.
   Three colours are canonical (brand manual, PARTE III — PALETA DE COLORES):
   red #FE0000, mist #F1F5F8, slate #22313A. Everything else on this page is a
   tint/shade derived from those three, or a status colour flagged as an addition. */
:root{
  /* --- brand core --- */
  --hydran-red:#FE0000;
  --hydran-mist:#F1F5F8;
  --hydran-slate:#22313A;

  /* --- red ramp (derived) --- */
  --red-50:#FFF0F0;--red-100:#FFD6D6;--red-200:#FFA8A8;--red-400:#FF3B3B;
  --red-500:#FE0000;--red-600:#D40000;--red-700:#A30000;--red-800:#6E0000;

  /* --- slate ramp (derived) --- */
  --slate-25:#F7FAFC;--slate-50:#F1F5F8;--slate-100:#E4EBF0;--slate-200:#CFDAE1;
  --slate-300:#AEBEC8;--slate-400:#8496A2;--slate-500:#5E7280;--slate-600:#42565F;
  --slate-700:#33454F;--slate-800:#22313A;--slate-900:#16222A;--slate-950:#0D161B;
  --white:#FFFFFF;--black:#000000;

  /* --- status (ADDITION: not defined in the manual) --- */
  --status-ok:#1B7F4E;--status-ok-soft:#E7F4ED;
  --status-warn:#B87400;--status-warn-soft:#FCF3E3;
  --status-critical:var(--red-600);--status-critical-soft:var(--red-50);
  --status-info:var(--slate-600);--status-info-soft:var(--slate-100);

  /* --- semantic surfaces --- */
  --bg-page:var(--white);
  --bg-subtle:var(--slate-50);
  --bg-sunken:var(--slate-100);
  --bg-surface:var(--white);
  --bg-inverse:var(--slate-800);
  --bg-inverse-deep:var(--slate-950);
  --bg-accent:var(--red-500);

  /* --- semantic text --- */
  --text-primary:var(--slate-800);
  --text-secondary:var(--slate-600);
  --text-muted:var(--slate-400);
  --text-inverse:var(--white);
  --text-inverse-muted:var(--slate-300);
  --text-accent:var(--red-600);
  --text-on-accent:var(--white);

  /* --- semantic lines --- */
  --border-subtle:var(--slate-100);
  --border-default:var(--slate-200);
  --border-strong:var(--slate-800);
  --border-accent:var(--red-500);
  --border-inverse:rgba(255,255,255,.16);
  --rule-hairline:1px;
  --rule-heavy:3px;

  /* --- interaction --- */
  --accent:var(--red-500);
  --accent-hover:var(--red-600);
  --accent-press:var(--red-700);
  --accent-soft:var(--red-50);
  --focus-ring:0 0 0 3px rgba(254,0,0,.28);
  --focus-ring-inverse:0 0 0 3px rgba(255,255,255,.4);
  --overlay-scrim:rgba(22,34,42,.72);

  /* --- imagery treatments --- */
  --img-scrim:linear-gradient(180deg,rgba(22,34,42,0) 0%,rgba(22,34,42,.55) 55%,rgba(22,34,42,.92) 100%); /* @kind color */
  --img-scrim-side:linear-gradient(90deg,rgba(22,34,42,.92) 0%,rgba(22,34,42,.55) 55%,rgba(22,34,42,0) 100%); /* @kind color */
}