/* ─────────────────────────────────────────────────────────────────────────
   Tokens de marca — Diagnóstico de Rendimiento (Smarteam).
   Identidad del sitio web smarteam (E:\Elias\Proyectos\sitio web smarteam):
   navy #051849 + naranja/coral #E8481C/#F87B5B, azul royal #0B58D3 de sistema,
   Plus Jakarta Sans única familia, cards 22px, sombras navy-tinted.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Tipografía */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Superficies (light) */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EEF3FC;
  --border: #EAEFF8;
  --border-strong: #C6D6F4;

  /* Texto */
  --text: #051849;
  --text-secondary: #41527A;
  --muted: #6B7AA0;

  /* Marca — azul royal = color de SISTEMA (selecciones, barras, radar, enlaces) */
  --primary: #0B58D3;
  --primary-dark: #07429A;
  --primary-soft: rgba(11, 88, 211, 0.08);
  /* Naranja = ACENTO/CTA principal */
  --accent: #E8481C;
  --accent-dark: #D63E14;
  --accent-soft: rgba(232, 72, 28, 0.10);
  --accent-coral: #F87B5B;   /* coral sólido para superficies oscuras (hero/eyebrow/hl) */

  /* Superficie oscura (topbar/hero, "ink" = navy) */
  --ink: #051849;
  --ink-2: #0A1C48;
  --ink-border: rgba(255, 255, 255, 0.08);
  --ink-text: #FFFFFF;
  --ink-muted: #9FB2DA;

  /* Escala de 5 niveles — semántica de data-viz (rojo→teal). DEBE coincidir con
     NIVELES_META en js/lib/niveles.js. Se mantiene: es escala, no marca. */
  --lvl-1: #F87171;
  --lvl-2: #FB923C;
  --lvl-3: #FBBF24;
  --lvl-4: #60A5FA;
  --lvl-5: #42E4B3;

  /* Radios (sitio smarteam: cards 22px, pill 999) */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Sombras (navy-tinted, del sitio) */
  --sh-sm: 0 1px 2px rgba(5, 24, 73, 0.05), 0 2px 8px -4px rgba(5, 24, 73, 0.10);
  --sh-md: 0 16px 40px -32px rgba(5, 24, 73, 0.22);
  --sh-lg: 0 26px 55px -32px rgba(5, 24, 73, 0.30);
  --sh-primary: 0 8px 26px -10px rgba(232, 72, 28, 0.50);

  /* Layout */
  --maxw: 1080px;
  --maxw-narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Animación (easing del sitio) */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.5s;
}