/* =========================================================
   TOKENS DE COLOR Y MEDIDAS
   Paleta de marca:
     #1E293B Azul pizarra oscuro (principal, 60 %)
     #64748B Gris acero (secundario, 30 %)
     #0F766E Verde teal (acento, 10 %)
     #F8FAFC Gris nube (texto claro / fondos de lectura)
   Tonos derivados (misma familia) para el modo oscuro y el contraste AA.
   ========================================================= */
:root {
  /* Superficies */
  --bg:          #0F172A;  /* fondo general: pizarra más profunda */
  --bg-deep:     #0B1222;  /* franjas y degradados */
  --panel:       #1E293B;  /* tarjetas y paneles: tu color principal */
  --panel-soft:  rgba(30, 41, 59, .55);

  /* Líneas y estructura */
  --line:        rgba(248, 250, 252, .12);
  --line2:       rgba(248, 250, 252, .22);
  --steel:       #64748B;  /* gris acero: divisores, anillos, diagramas */

  /* Texto */
  --ink:         #F8FAFC;  /* 17:1 sobre --bg */
  --ink-soft:    #CBD5E1;  /* 12:1 */
  --muted:       #94A3B8;  /* 7:1 sobre --bg · 5,7:1 sobre --panel */

  /* Acento */
  --accent:        #0F766E;  /* superficies rellenas (botones). Texto claro encima: 5,2:1 */
  --accent-hover:  #115E59;
  --accent-ink:    #F8FAFC;  /* texto sobre --accent */
  --accent-text:   #2DD4BF;  /* acento legible sobre fondo oscuro: 9,6:1 */
  --accent-soft:   #5EEAD4;
  --accent-glow:   rgba(45, 212, 191, .28);
  --accent-faint:  rgba(45, 212, 191, .08);

  /* Botón secundario (claro) */
  --light-btn:     #F8FAFC;
  --light-btn-ink: #0F172A;

  /* Estados */
  --ok:     #2DD4BF;
  --error:  #FCA5A5;

  /* Tipografía */
  --font-display: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Roboto", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --radius:    15px;
  --radius-sm: 10px;
  --container: 1240px;
  --gutter:    clamp(16px, 4vw, 40px);
  --section-y: clamp(80px, 11vw, 140px);
  --nav-h:     84px;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}