/* HostTribu · tokens de color y forma de la LANDING y las guías.
   Paleta océano / arena / ámbar (⚖ fundador 28-sep-2026, rediseño 29-sep): los
   MISMOS nombres y valores que app/static/tokens.css. Desde el 28-sep la app
   ya no era copia de este archivo; con el rediseño de la landing vuelven a
   coincidir en la paleta. La landing es solo modo claro: acá no hay compat con
   los nombres terracota (--terra, --coral, --brown, --soft) que la app todavía
   conserva mientras migra. tests/test_tokens.py verifica que los nombres y los
   valores compartidos no diverjan.

   Regla de uso: los componentes consumen SOLO la capa semántica.
   Los primitivos (--ocean-700, --sand-2, ...) existen para definir
   semánticos; si un componente los referencia directo, es un bug. */

:root {
  color-scheme: light;

  /* ---------- PRIMITIVOS (el color en sí; no usar en componentes) ---------- */
  --ocean-700: #10444F;   /* océano: texto, link y botón. 10.70:1 blanco · 9.35:1 arena · 9.04:1 soft */
  --ocean-800: #0D3841;   /* hover y aro de foco. 12.66:1 con blanco encima · 11.06:1 vs arena (aro) */
  --ocean-900: #092C33;   /* active. 14.79:1 con blanco encima */
  --ocean-950: #0B343D;   /* base de la barra superior y de las secciones oscuras */
  --ocean-600: #16505C;   /* superficie 2 sobre oscuro */
  --ocean-500: #3A5C64;   /* bordes sobre oscuro (decorativo) */
  --amber-400: #F2B544;   /* ámbar de marca: logo, barras, detalles. 1.83:1 sobre blanco:
                             NUNCA texto ni borde de estado sobre claro. 7.29:1 sobre ocean-950 */
  --amber-950: #3A2A06;   /* texto ENCIMA del ámbar y de sus tintes. 7.58:1 sobre amber-400 */

  --teal-700:  #2D6E82;   /* info / en curso. 5.73:1 blanco · 5.01:1 arena · 4.84:1 soft */
  --teal-300:  #7FC9D1;   /* info sobre oscuro. 7.11:1 ocean-950 · 5.70:1 ocean-700 · 4.78:1 ocean-600 */

  --slate-300: #B1BEBB;   /* texto atenuado sobre oscuro. 6.96:1 ocean-950 · 5.58:1 ocean-700 · 4.69:1 ocean-600 */
  --green-300: #7FD1A3;   /* rótulo/ok sobre oscuro. 7.34:1 ocean-950 · 5.89:1 ocean-700 · 4.94:1 ocean-600 */
  --green-700: #1D794B;   /* ok sobre claro. 5.40:1 blanco · 4.72:1 arena · 4.56:1 soft · 4.72:1 sobre su tinte.
                             El #1E7A4C del informe daba 4.497:1 sobre soft: un pelo abajo de AA */

  --amber-800: #8A5A00;   /* warn. 5.93:1 blanco · 5.18:1 arena · 5.06:1 sobre su tinte. 3.24:1 vs amber-400: no se confunden */
  --amber-500: #C98A10;   /* base del tinte warn */
  --red-800:   #A23B2E;   /* err. 6.56:1 blanco · 5.73:1 arena · 5.62:1 sobre su tinte */

  --sand-0:    #FFFFFF;
  --sand-05:   #F4EFE7;   /* arena: el `body` de la app entera, para que las
                             tarjetas blancas floten encima con sombra en vez de borde. */
  --sand-2:    #F1EBE3;   /* superficie suave (sidebar, bloques). 1.05:1 vs blanco:
                             separa por sombra, no por contraste. */
  --sand-3:    #E6DFD3;   /* línea decorativa. 1.32:1 blanco: solo separador */
  --sand-4:    #D2C7B3;   /* línea fuerte decorativa. 1.67:1 blanco · 1.46:1 arena */
  --sand-6:    #8C8373;   /* borde de INPUT (WCAG 1.4.11 pide 3:1). 3.74:1 blanco · 3.27:1 arena · 3.16:1 soft */
  --ink-950:   #1B2624;   /* 15.56:1 blanco · 13.60:1 arena */
  --ink-600:   #5E6B68;   /* 5.56:1 blanco · 4.86:1 arena · 4.69:1 soft */

  /* ---------- SEMÁNTICOS (lo que usan los componentes) ---------- */
  /* superficies */
  --bg:            var(--sand-0);
  --bg-app:        var(--sand-05);   /* fondo de `body`; las tarjetas quedan en --bg */
  --crema:         var(--sand-2);
  --line:          var(--sand-3);
  --line-strong:   var(--sand-4);
  --line-input:    var(--sand-6);    /* SOLO el borde de input/select/textarea en reposo */

  /* texto */
  --ink:           var(--ink-950);
  --mute:          var(--ink-600);

  /* acento (marca) */
  --brand:         var(--amber-400);   /* logo, barras, detalles, accent sobre oscuro. NUNCA texto sobre claro ni indicador de estado/foco */
  --brand-tint:    rgba(16, 68, 79, .08);   /* tinte de marca sobre claro: es del océano, no del ámbar (#ECF0F1 sobre blanco) */
  --brand-ink:     var(--amber-950);   /* texto encima del ámbar o de sus tintes */
  --accent:        var(--ocean-700);   /* texto océano y fondo de botón primario */
  --accent-hover:  var(--ocean-800);
  --accent-active: var(--ocean-900);
  --accent-disabled: rgba(16, 68, 79, .45);
  --focus-ring:    0 0 0 3px var(--ocean-800);   /* 12.66:1 blanco · 11.06:1 arena · 10.69:1 soft */

  /* estado */
  --ok:      var(--green-700);  --ok-bg:   rgba(29, 121, 75, .10);
  --warn:    var(--amber-800);  --warn-bg: rgba(201, 138, 16, .16);
  --err:     var(--red-800);    --err-bg:  rgba(162, 59, 46, .10);
  --info:    var(--teal-700);   --info-bg: rgba(45, 110, 130, .10);

  /* gráficas: series categóricas en este orden. La 1.ª es el primario; la 2.ª
     es cálida a propósito para que no se confunda con la 1.ª. */
  --chart-1: var(--ocean-700);
  --chart-2: var(--amber-800);
  --chart-3: var(--green-700);
  --chart-4: var(--teal-700);
  --chart-mute: var(--sand-4);

  /* sobre oscuro (barra superior, secciones .dark, .close, .build) */
  --dark:          var(--ocean-950);
  --on-dark:       var(--sand-05);      /* 11.67:1 sobre ocean-950 · 9.35:1 ocean-700 · 7.85:1 ocean-600 */
  --on-dark-mute:  var(--slate-300);
  --on-dark-accent: var(--amber-400);
  --on-dark-ok:    var(--green-300);
  --on-dark-info:  var(--teal-300);
  --on-dark-surface:   var(--ocean-700);
  --on-dark-surface-2: var(--ocean-600);
  --on-dark-line:  var(--ocean-500);

  /* forma y tipografía (sin cambios; se mueven acá para que vivan con el color) */
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --r-xs: 3px; --r-sm: 8px; --r-md: 14px; --r-lg: 16px; --r-pill: 999px;
  --sh-card: 0 1px 2px rgba(27, 38, 36, .04);
  --sh-lift: 0 18px 40px -28px rgba(27, 38, 36, .34);
  /* La sombra de la tarjeta que flota sobre --bg-app (cáscara moderna
     21-sep-2026): --sh-card de cerca + una difusa más grande, en vez del
     hairline que separaba antes. */
  --sh-float: var(--sh-card), 0 10px 30px -18px rgba(27, 38, 36, .22);
}

/* Scope oscuro: la barra superior de la app y las secciones oscuras.
   Es el mismo mecanismo que usaría un modo oscuro global: se redefinen
   los semánticos, no los componentes.

   corregido 21-sep (revisión de seguridad/diseño sobre #411): --accent y
   --brand NO se remapean acá. Son botón/texto SOBRE CLARO; dentro de este
   scope oscuro un componente que siga usando --accent como fondo de texto
   blanco (`.btn-primary` en `.close`, `.build .bar i`) resolvería a
   --on-dark-accent (ámbar) y quedaría a 1.83:1 -- muy bajo AA. Lo que sí
   necesita ámbar sobre oscuro ya lo pide directo con `var(--on-dark-accent)`, no vía --accent. */
.dark, .close, .build, .nav-oscuro {
  --bg:     var(--on-dark-surface);
  --crema:  var(--on-dark-surface-2);
  --line:   var(--on-dark-line);
  --ink:    var(--on-dark);
  --mute:   var(--on-dark-mute);
  --ok:     var(--on-dark-ok);
  --info:   var(--on-dark-info);
  background: var(--dark);
  color: var(--on-dark);
}