/* ═══════════════════════════════════════════════════════════════════
   vt-luker · Design Tokens — Identidad Innovanalisis
   ───────────────────────────────────────────────────────────────────
   Marca: Finanzas (azul) + Innovación (naranja) + Naturaleza (verde),
   tres elementos en un círculo. Cliente del informe: Luker Chocolate.

   Dirección de la PUERTA PÚBLICA (landing/login):
   sala de datos confidencial sobre campo navy, con los tres acentos de
   marca usados como marcas finas — no decoración. Tipografía Creato
   Display (marca) con DM Sans de respaldo (la del dashboard de Luker).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Paleta oficial Innovanalisis ──────────────────────────────── */
  --navy-900: #0D2233;   /* navy más profundo para campos oscuros */
  --navy-800: #122E44;   /* azul corporativo — color principal de marca */
  --navy-700: #1F4763;   /* hover / desaturado */
  --navy-600: #2C5C7E;

  --azul-500: #4DADCE;   /* azul finanzas — datos, enlaces, acento frío */
  --azul-300: #B5D9E6;
  --azul-100: #E8F2F6;

  --verde-500: #93BD41;  /* verde naturaleza — positivos, "acceso activo" */
  --verde-700: #6E9B2C;
  --verde-100: #EAF2D6;

  --naranja-500: #F1AD0A; /* naranja innovación — destacar 1 cosa crítica */
  --naranja-700: #C48908;
  --naranja-100: #FBEACB;

  --rojo-500: #C24A2D;   /* alertas / negativos */
  --rojo-100: #F5DDD4;

  --gris-700: #4A4A4A;
  --gris-500: #707070;   /* gris de marca (texto secundario) */
  --gris-300: #B8BEC2;
  --gris-200: #D9DEE1;

  --paper:   #F5FAFC;    /* fondo de marca (= fondo del dashboard Luker) */
  --paper-2: #FFFFFF;    /* tarjetas */
  --paper-3: #EAF1F5;    /* superficies suaves */

  /* ─── Roles semánticos ──────────────────────────────────────────── */
  --bg-page:   var(--paper);
  --bg-dark:   var(--navy-800);
  --bg-card:   var(--paper-2);

  --text-strong: var(--navy-800);
  --text-body:   var(--gris-700);
  --text-muted:  var(--gris-500);
  --text-on-dark: #EAF4F8;
  --text-on-dark-muted: #92AEC0;

  --accent-fin:  var(--azul-500);
  --accent-nat:  var(--verde-500);
  --accent-inn:  var(--naranja-500);
  --positivo:    var(--verde-700);
  --negativo:    var(--rojo-500);

  --line-soft: rgba(18, 46, 68, 0.10);
  --line-mid:  rgba(18, 46, 68, 0.18);
  --line-dark: rgba(234, 244, 248, 0.14);

  /* ─── Tipografía ─────────────────────────────────────────────────── */
  /* Display = fuente de marca. Si Creato Display no está cargada,
     cae con elegancia a DM Sans (la que ya usa el dashboard). */
  --font-display: 'Creato Display', 'DM Sans', -apple-system, system-ui, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Escala */
  --text-xs:   0.6875rem;  /* 11 — eyebrows, etiquetas */
  --text-sm:   0.8125rem;  /* 13 */
  --text-base: 0.9375rem;  /* 15 — cuerpo */
  --text-md:   1.0625rem;  /* 17 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.875rem;   /* 30 */
  --text-2xl:  2.5rem;     /* 40 */
  --text-3xl:  3.25rem;    /* 52 */
  --text-4xl:  4.25rem;    /* 68 — titular de landing */

  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-wide:    0.04em;
  --ls-wider:   0.14em;   /* eyebrows en mayúsculas */

  /* ─── Espacio (escala 4px) ──────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ─── Radios ─────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ─── Sombras ────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(18, 46, 68, 0.06);
  --shadow-md:  0 6px 24px rgba(18, 46, 68, 0.10);
  --shadow-lg:  0 18px 48px rgba(13, 34, 51, 0.22);

  /* ─── Transiciones ───────────────────────────────────────────────── */
  --t-fast: 130ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Contenedores ───────────────────────────────────────────────── */
  --container: 1120px;
  --container-narrow: 460px;
}

/* ───────────────────────────────────────────────────────────────────
   Creato Display (fuente de marca). Coloca los archivos .woff2 en
   /assets/fonts/ y descomenta. Mientras tanto el sistema usa DM Sans.
   ─────────────────────────────────────────────────────────────────── */
/*
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/