/* ==========================================================================
   tokens.css — Variables de marca (Manual de Marca Refrigia v1)
   Un solo lugar para colores, tipografía, radios y espaciados: los archivos css
   usan var(--token) en vez de repetir el valor. Excepciones a propósito: las
   variantes translúcidas (rgba) se escriben en cada regla, y los colores de un
   solo uso de las ilustraciones (paneles de "Antes / después", monitor) van inline.
   ========================================================================== */
:root {
  /* Marca */
  --blue: #3271EA;          /* primario */
  --navy: #0F1B33;          /* fondo profundo */
  --ice: #38BDF8;           /* acento diferenciador */
  --navy-2: #15264A;        /* superficies sobre navy */
  --blue-hover: #2A63D6;    /* botón primario al pasar el mouse */
  --blue-ink: #2A63D6;      /* azul para TEXTO chico y aros de foco sobre fondos claros: 5,4:1 sobre blanco
                               (el azul de marca da ~4,5:1, justo en el límite). Para revertir: igualarlo a --blue */

  /* Estados (semáforo del producto) */
  --ok: #10B981;
  --warn: #F59E0B;
  --crit: #DC2626;
  /* Variantes de los estados: fondos de chips/avisos y textos sobre ellos */
  --ok-bg: #D1FAE5;   --ok-ink: #059669;
  --warn-bg: #FEF3C7; --warn-ink: #B45309; --warn-soft: #FBBF24;
  --crit-bg: #FEE2E2; --crit-soft: #F87171; --crit-pale: #FCA5A5;

  /* Neutros */
  --text: #3E3E3C;
  --slate: #64748B;
  --bg: #F8FAFC;
  --white: #FFFFFF;

  /* Líneas y superficies translúcidas */
  --line-dark: rgba(255, 255, 255, .10);
  --line-light: rgba(15, 27, 51, .10);
  --on-dark: rgba(255, 255, 255, .72);

  /* Tipografía */
  --font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

  /* Radios */
  --r-m: 20px;
  --r-l: 28px;
  --r-xl: 40px;

  /* Layout */
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  /* Padding de cada .section (arriba y abajo). Se suma con el de la sección siguiente
     en cada borde, así que se mantiene contenido a propósito para que no se sienta
     como espacio muerto entre bloques que sí están relacionados. */
  --section-y: clamp(64px, 8vw, 120px);

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}