/* ============================================================
   TEMA PREDISE — contrato de tokens
   ------------------------------------------------------------
   Único lugar del proyecto donde se declaran colores en hex.
   Fuera de este bloque, todo el CSS debe usar var(--token).

   Origen de los valores:
     [logo]      static/img/Logo_Predise.svg
     [templates] hex ya presentes en caminantesapp/templates
     [derivado]  scripts/derive_theme.py --brand "#0BA6B0"

   Contraste WCAG verificado par por par (ratios en el comentario).
   Al cambiar --brand hay que regenerar la rampa, no editar a mano.
   ============================================================ */

:root {
  /* ---------- Marca ---------- */
  --brand: #0BA6B0;              /* [logo] dominante, x3 en el SVG */
  --brand-deep: #0F5F73;         /* [logo] + x27 en templates */
  --brand-lift: #7FD0DF;         /* [logo] solo gradientes y decoracion */
  --brand-hover: #098890;        /* [derivado] estado pressed */
  --on-brand: #111827;           /* 5.99:1 sobre --brand */
  --on-brand-deep: #FFFFFF;      /* 7.23:1 sobre --brand-deep */
  --on-brand-lift: #111827;      /* 10.13:1 sobre --brand-lift */
  --brand-text: #07838B;         /* 4.54:1 sobre blanco — marca como TEXTO */
  --accent: #FFDA36;             /* [templates] solo decorativo (1.37:1) */
  --on-accent: #111827;          /* 12.95:1 sobre --accent */
  --accent-text: #886F00;        /* 4.86:1 — el acento oscurecido para texto */

  /* ---------- Estado ---------- */
  --ok: #16A34A;
  --warn: #F59E0B;
  --danger: #DC2626;
  --info: #0BA6B0;

  /* ---------- Marcas de grafico ----------
     Los niveles de riesgo cuando se DIBUJAN, no cuando se escriben.
     Los tokens de texto (--danger-fg y compania) son tinta: pensados para leerse
     sobre un fondo claro. Usados como relleno de una barra quedan oscuros y
     parecidos entre si, y sobre todo el verde y el ambar se vuelven el mismo
     color en deuteranopia -- ΔE 4.5, o sea indistinguibles.
     Estos pasan la separacion por daltonismo en todos los pares: el peor es
     verde contra ambar con ΔE 8.2 en protanopia. El ambar queda en 2.29:1 de
     contraste, por debajo de 3:1, asi que toda barra tiene que llevar su cifra
     escrita al lado: el color solo no basta. */
  --marca-alto: #B42318;
  --marca-medio: #F79009;
  --marca-bajo: #039855;
  --marca-sindatos: #CBD5E1;   /* gris a proposito: no hay dato que graduar */

  /* ---------- Chips de estado ---------- */
  --ok-bg: #E6FAED;      --ok-fg: #0D8238;      --ok-bd: #C6F1D6;
  --warn-bg: #FCF3E4;    --warn-fg: #975F02;    --warn-bd: #F6E2C1;
  --danger-bg: #F9E6E6;  --danger-fg: #871212;  --danger-bd: #F0C7C7;
  --info-bg: #E6F8F9;    --info-fg: #11777E;    --info-bd: #C7EDF0;
  --neutral-bg: #FBFCFC; --neutral-fg: #5B7476; --neutral-bd: #E2E9E9;

  /* ---------- Neutros tenidos con el matiz de marca ---------- */
  --bg: #F4F8F8;
  --surface: #FFFFFF;
  --surface-2: #FBFCFC;
  --border: #E2E9E9;             /* decorativo: separadores y tarjetas */
  --border-strong: #779B9D;      /* 3.02:1 — contorno de control, WCAG 1.4.11 */
  --text: #1D2F30;               /* 13.99:1 sobre --surface */
  --muted: #5B7476;              /* 4.99:1 sobre --surface */
  --nav-bg: #084145;
  --on-nav: rgba(255, 255, 255, .90);

  /* ---------- Forma, sombra, foco ---------- */
  --r-card: 14px;
  --r-field: 10px;
  --r-pill: 999px;
  --shadow-1: 0 1px 4px rgba(11, 166, 176, .10);
  --shadow-2: 0 6px 20px rgba(11, 166, 176, .14);
  --shadow-brand-1: 0 3px 12px rgba(11, 166, 176, .30);
  --shadow-brand-2: 0 7px 22px rgba(11, 166, 176, .40);
  --ring: 0 0 0 3px rgba(11, 166, 176, .18);

  /* ---------- Tipografia ---------- */
  --ff-title: 'Montserrat', 'Segoe UI', Roboto, sans-serif;
  --ff-body: 'Nunito', 'Segoe UI', Roboto, sans-serif;
  --ff-brand: var(--ff-title);
  --fw-title: 800;
}

/* ------------------------------------------------------------
   Alias de compatibilidad.
   El proyecto trae SB Admin Pro con Bootstrap 4 embebido; estos
   alias permiten que markup viejo tome el color de marca sin
   reescribirlo todavia. No los uses en codigo nuevo.
   ------------------------------------------------------------ */
:root {
  --primary: var(--brand);
  --teal: var(--brand);
  --petrol: var(--brand-deep);
}