/* ══════════════════════════════════════════════════════════════════
   ATALAYA · EL SISTEMA DE DISEÑO (02/10/2026 · kit de marca v1.0)
   ══════════════════════════════════════════════════════════════════
   La ÚNICA fuente de verdad de los colores, la tipografía y las medidas
   del software. ATALAYA es el SOFTWARE; el despacho que lo usa (su nombre,
   su logotipo, su color) se configura aparte (services/marca.py).

   Se carga ANTES del <style> de cada página (equipo, portal,
   conciliación). Las hojas de esas páginas conservan sus nombres de
   siempre (--azul, --papel, --tinta…) porque ~5 400 estilos en línea de
   app.js los nombran; sus VALORES son los de este archivo, uno por uno,
   y pruebas/pytest/test_atalaya_design_system.py comprueba que no se
   despeguen. Documentación: especificaciones/ATALAYA_design_system.md.

   Reglas cortas (las largas, en el documento):
   · Champagne es ACENTO: filetes, isotipo, un número de capítulo sobre
     navy. NUNCA texto chico sobre blanco (da 1.97:1). Para texto sobre
     claro existe --atalaya-champagne-oscuro (6.2:1 sobre blanco).
   · Lujo por restricción: espacio, jerarquía y tipografía. Sin brillos,
     sin gradientes de adorno, sin «todo negro + dorado».
   · Un estado nunca se dice sólo con color: color + ícono + texto.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* ── Primitivos de la marca ───────────────────────────────────── */
  --atalaya-navy:#0B1F3B;
  --atalaya-champagne:#D4B483;
  --atalaya-ivory:#EAE6D9;
  --atalaya-graphite:#1F2937;
  --atalaya-white:#FFFFFF;

  /* Los tokens extra del kit (brand-tokens.css), con su nombre. Se
     adoptan donde hay un equivalente directo y el contraste pasa:
     surface → --surface-secondary (el papel), border → --border-default,
     info → --info. success, warning y danger NO pasan 4.5:1 como texto
     (1E8E5A da 4.14 sobre blanco, B7791F 3.64, C53B3B 4.44 sobre su
     fondo suave): se quedan como primitivos y los estados conservan los
     grados medidos de abajo. */
  --atalaya-surface:#F8F7F4;
  --atalaya-border:#D8DDE3;
  --atalaya-success:#1E8E5A;
  --atalaya-warning:#B7791F;
  --atalaya-danger:#C53B3B;
  --atalaya-info:#2563A8;

  /* Grados derivados (medidos; ver el documento). */
  --atalaya-navy-950:#081428;   /* papel del tema oscuro */
  --atalaya-navy-900:#0B1F3B;   /* = navy */
  --atalaya-navy-850:#0F2340;   /* tarjeta del tema oscuro */
  --atalaya-navy-800:#142949;   /* tarjeta secundaria del tema oscuro */
  --atalaya-navy-700:#1B3A66;   /* acción principal en claro (11.4:1 con blanco) */
  --atalaya-navy-600:#33496E;
  --atalaya-navy-300:#9DB7DC;   /* acción principal en oscuro */
  --atalaya-navy-200:#C3CCDA;
  --atalaya-navy-50:#ECEFF4;    /* fondo suave de la acción en claro */
  --atalaya-champagne-claro:#E6D3AE;
  --atalaya-champagne-oscuro:#7A5C26;  /* texto «champagne» sobre claro: 6.2 en blanco, 5.8 en el papel */
  --atalaya-champagne-suave:#F6EFE2;
  --atalaya-ivory-25:#FAF9F6;   /* tarjeta secundaria del tema claro */
  --atalaya-ivory-100:#EEEBE4;  /* borde suave */
  --atalaya-graphite-700:#3D4656;
  --atalaya-graphite-500:#566070;
  --atalaya-graphite-400:#5E6777;
  --atalaya-gris-control:#7C8190;

  /* ── Semánticos · tema claro ─────────────────────────────────── */
  --surface-primary:var(--atalaya-white);
  --surface-secondary:var(--atalaya-surface);
  --surface-tertiary:var(--atalaya-ivory-25);
  --surface-dark:var(--atalaya-navy);
  --text-primary:var(--atalaya-graphite);
  --text-strong:var(--atalaya-navy);
  --text-soft:var(--atalaya-graphite-700);      /* el segundo texto fuerte (etiquetas de campo) */
  --text-secondary:var(--atalaya-graphite-500);
  --text-tertiary:var(--atalaya-graphite-400);
  --text-inverse:var(--atalaya-white);
  --border-subtle:var(--atalaya-ivory-100);
  --border-default:var(--atalaya-border);
  --border-control:var(--atalaya-gris-control);
  --action-primary:var(--atalaya-navy-700);
  --action-primary-hover:var(--atalaya-navy);
  --action-primary-suave:var(--atalaya-navy-50);
  --action-primary-borde:var(--atalaya-navy-200);
  --accent:var(--atalaya-champagne);
  --focus-ring:var(--atalaya-navy-700);

  /* Estados. Cada uno con su «-suave» de fondo. Todos dan ≥4.5:1 sobre
     su suave y sobre las superficies. Van SIEMPRE con ícono y texto. */
  --success:#167A46;   --success-suave:#EDF7F1;
  --warning:#8C6209;   --warning-suave:#FDF6E7;
  --danger:#B4362A;    --danger-suave:#FCEAE6;  --danger-borde:#F2CFC8;
  --info:var(--atalaya-info); --info-suave:#EAF1F8;
  --pending:#4F5B6E;   --pending-suave:#EEF0F3;
  --processing:var(--atalaya-champagne-oscuro); --processing-suave:var(--atalaya-champagne-suave);

  /* ── Tipografía ───────────────────────────────────────────────── */
  --font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs-caption:12px;
  --fs-body:14px;
  --fs-h3:16px;
  --fs-h2:20px;
  --fs-h1:26px;
  --fw-bold:700;
  --fw-semibold:600;
  --fw-medium:500;
  --fw-regular:400;
  --fw-light:300;
  --lh-tight:1.2;
  --lh-body:1.5;
  --tracking-etiqueta:.06em;   /* mayúsculas chicas: positivo LEVE */
  --tracking-marca:.24em;      /* sólo el descriptor de la marca, ≥ 12 px */

  /* ── Espaciado (4 · 8 · 12 · 16 · 24 · 32 · 48) ─────────────────── */
  --esp-1:4px;
  --esp-2:8px;
  --esp-3:12px;
  --esp-4:16px;
  --esp-5:24px;
  --esp-6:32px;
  --esp-7:48px;

  /* ── Radios, sombras, movimiento, capas ───────────────────────── */
  --radio-chico:8px;
  --radio:12px;
  --sombra-1:0 1px 2px rgba(11,31,59,.05);
  --sombra-2:0 1px 2px rgba(11,31,59,.04),0 8px 24px rgba(11,31,59,.06);
  --transicion-rapida:.15s ease;
  --transicion:.2s ease;
  --transicion-cajon:.28s cubic-bezier(.32,.72,0,1);
  --z-cabecera:40;
  --z-velo:49;
  --z-cajon:50;
  --z-modal:60;
  --z-aviso:70;
}

/* ── Semánticos · tema oscuro ─────────────────────────────────────
   Navy profundo de superficie; la acción se aclara (azul acero) para no
   confundirse con el ámbar de «advertencia». Champagne sigue siendo
   acento, no se vuelve el color de todo. */
[data-tema="oscuro"]{
  --surface-primary:var(--atalaya-navy-850);
  --surface-secondary:var(--atalaya-navy-950);
  --surface-tertiary:var(--atalaya-navy-800);
  --surface-dark:#13284A;
  --text-primary:#ECE9E1;
  --text-strong:var(--atalaya-ivory);
  --text-soft:#C9C5BA;
  --text-secondary:#AAB2C0;
  --text-tertiary:#939CAC;
  --text-inverse:var(--atalaya-navy);
  --border-subtle:#192C4B;
  --border-default:#22375A;
  --border-control:#667A9A;
  --action-primary:var(--atalaya-navy-300);
  --action-primary-hover:#B9CCE7;
  --action-primary-suave:#1A2D50;
  --action-primary-borde:#36507A;
  --accent:var(--atalaya-champagne);
  --focus-ring:var(--atalaya-navy-300);
  --success:#66C393;   --success-suave:#15291E;
  --warning:#DCAF57;   --warning-suave:#332A14;
  --danger:#E28A7E;    --danger-suave:#3A201B;  --danger-borde:#5A2F28;
  --info:#8DB4E2;      --info-suave:#14294A;
  --pending:#AAB2C0;   --pending-suave:#1C2A42;
  --processing:var(--atalaya-champagne); --processing-suave:#2E2716;
  --sombra-1:0 1px 2px rgba(0,0,0,.3);
  --sombra-2:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}