/* ═══════════════════════════════════════════════════════════════════
   val-sciphage.innovanalisis.com — Design System Tokens
   ═══════════════════════════════════════════════════════════════════
   
   Dirección estética: EDITORIAL FINANCIERO REFINADO
   - Referencia: Financial Times, The Economist, Bloomberg Markets
   - Tipografía: Source Serif 4 (display) + IBM Plex Sans (body) + IBM Plex Mono (datos)
   - Color: paleta oficial Innovanalisis, dominante azul corporativo, 
     acentos quirúrgicos
   - Espacio: generoso, respiración tipográfica
   - Elementos decorativos: líneas finas, smallcaps, pipes (│) editoriales
   
   NO usar: iconos genéricos, gradientes, glassmorphism, border-radius grandes,
   sombras pesadas, animaciones decorativas.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Paleta oficial Innovanalisis ──────────────────────────────── */
  --ink-900: #122E44;          /* Azul corporativo — texto principal, fondos oscuros */
  --ink-700: #1F4763;          /* Azul corporativo desaturado para hovers */
  --ink-500: #4DADCE;          /* Azul finanzas — accent para datos y links */
  --ink-300: #B5D9E6;          /* Azul tinte — backgrounds suaves */
  --ink-100: #E8F2F6;          /* Azul tinte muy claro */

  --leaf-500: #93BD41;         /* Verde naturaleza — solo para positivos (crecimiento, ROI+) */
  --leaf-700: #6E9B2C;         /* Verde naturaleza oscuro — hover */
  --leaf-100: #EAF2D6;         /* Verde tinte */

  --gold-500: #F1AD0A;         /* Naranja innovación — solo para destacar 1-2 cosas críticas */
  --gold-700: #C48908;
  --gold-100: #FBEACB;

  --rust-500: #C24A2D;         /* Reservado para negativos/alertas */
  --rust-100: #F5DDD4;

  --paper-50:  #FCFCFA;        /* Fondo principal — blanco roto, no #fff puro (más editorial) */
  --paper-100: #F7F5F0;        /* Fondo levemente más oscuro */
  --paper-200: #ECE8DF;        /* Fondo de cards o secciones */

  --rule-100: #E4DFD3;         /* Líneas finas decorativas (separadores tipo periódico) */
  --rule-300: #C8C0AE;         /* Líneas más definidas */
  --rule-500: #8A8273;         /* Líneas para uso destacado */

  --gray-900: #1A1815;         /* Texto principal */
  --gray-700: #3D3933;
  --gray-500: #6B6558;
  --gray-300: #9C9587;
  --gray-100: #D8D2C2;

  /* ─── Roles semánticos ──────────────────────────────────────────── */
  --bg-page:     var(--paper-50);
  --bg-card:     var(--paper-100);
  --bg-inverse:  var(--ink-900);

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--paper-50);
  --text-accent:    var(--ink-900);

  --rule-soft: var(--rule-100);
  --rule-mid:  var(--rule-300);
  --rule-hard: var(--rule-500);

  --pos: var(--leaf-700);      /* Positivo: crecimiento */
  --neg: var(--rust-500);      /* Negativo: pérdidas */
  --highlight: var(--gold-500);

  /* ─── Tipografía ─────────────────────────────────────────────────── */
  /* Display: para titulares, números héroe, secciones */
  --font-display: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif;
  
  /* Body: para texto corrido y UI */
  --font-body: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  
  /* Mono: para datos tabulares, cifras alineadas */
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', monospace;

  /* ─── Escala tipográfica (editorial, generosa) ──────────────────── */
  --text-xs:   0.6875rem;   /* 11px — smallcaps, etiquetas */
  --text-sm:   0.8125rem;   /* 13px — labels secundarios */
  --text-base: 0.9375rem;   /* 15px — body */
  --text-md:   1.0625rem;   /* 17px — body destacado */
  --text-lg:   1.375rem;    /* 22px — subtítulos */
  --text-xl:   1.75rem;     /* 28px — títulos de sección */
  --text-2xl:  2.25rem;     /* 36px — números héroe medianos */
  --text-3xl:  3rem;        /* 48px — títulos página */
  --text-4xl:  4rem;        /* 64px — números héroe grandes */
  --text-5xl:  5.5rem;      /* 88px — display monumental (KPI principal) */

  /* ─── Pesos ──────────────────────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Line-height ────────────────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.75;

  /* ─── Letter-spacing ─────────────────────────────────────────────── */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;
  --ls-widest:   0.18em;   /* Para smallcaps */

  /* ─── 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;

  /* ─── Bordes finos (estilo periódico) ────────────────────────────── */
  --rule-thin:  1px solid var(--rule-soft);
  --rule-mid:   1px solid var(--rule-mid);
  --rule-hard:  2px solid var(--rule-hard);
  --rule-ink:   1px solid var(--ink-900);

  /* ─── Border-radius (mínimo, casi nada) ──────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 3px;
  /* Sin radius grande — esto NO es Stripe-style */

  /* ─── Transitions ────────────────────────────────────────────────── */
  --t-fast: 120ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Container widths ───────────────────────────────────────────── */
  --container-narrow: 720px;
  --container-base:   960px;
  --container-wide:   1200px;
  --container-full:   1440px;

  /* ─── Sombras (sutiles, solo para overlay states) ───────────────── */
  --shadow-subtle: 0 1px 2px rgba(18, 46, 68, 0.04);
  --shadow-overlay: 0 8px 32px rgba(18, 46, 68, 0.12);
}

/* ─── Modo dark reservado para Sesión 6 (opcional) ─────────────────── */
/* @media (prefers-color-scheme: dark) { :root { ... } } */