/* ===================================================================
   TOKENS — paleta de marca Kiriox
   Base principal: BLANCO. Acentos: navy, azul y naranja.
   =================================================================== */
:root{
  /* --- Colores de marca --- */
  --white:#FFFFFF;
  --mist:#F2F3F4;          /* gris claro de apoyo */
  --navy:#02066F;          /* azul profundo */
  --blue:#2000B1;          /* azul vivo */
  --orange:#ED4B00;        /* naranja de acción */

  /* --- Superficies --- */
  --paper:var(--white);    /* superficie principal */
  --base:var(--mist);      /* bandas alternas */
  --dark:var(--navy);      /* bloques oscuros de acento */
  --dark-2:#0A0F8A;        /* navy aclarado hacia el azul */

  /* --- Texto --- */
  --ink:#0A0E3A;           /* texto principal */
  --heading:var(--navy);   /* titulares */
  --muted:#5C6280;         /* texto secundario */
  --muted-light:#BFC3DC;   /* texto secundario sobre fondo oscuro */

  /* --- Líneas --- */
  --line:#E4E6EC;
  --line-strong:#D2D6E2;
  --line-dark:rgba(255,255,255,.16);

  /* --- Tintes translúcidos --- */
  --blue-05:rgba(32,0,177,.05);
  --blue-10:rgba(32,0,177,.10);
  --blue-18:rgba(32,0,177,.18);
  --orange-08:rgba(237,75,0,.08);
  --orange-14:rgba(237,75,0,.14);
  --orange-22:rgba(237,75,0,.22);
  --navy-10:rgba(2,6,111,.10);

  /* --- Sombras --- */
  --shadow-sm:0 6px 18px rgba(2,6,111,.06);
  --shadow-md:0 16px 34px rgba(2,6,111,.09);
  --shadow-lg:0 20px 48px rgba(2,6,111,.12);

  /* --- Tipografía --- */
  --display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Medidas --- */
  --wrap:1180px;
  --gutter:24px;
  --radius:14px;
  --radius-lg:18px;
}