/* ─────────────────────────────────────────────────────────────────────────
 * Eligentia v8 · tokens.css
 * Variables compartidas: paleta granular, tipografía, radios, sombras.
 * Cada bloque (YA, IS, RO, etc.) puede sobreescribir --accent vía themes/.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Paleta púrpura (marca Eligentia) */
  --purple-50:  #EEEDFE;
  --purple-100: #DDD9F8;
  --purple-400: #7F77DD;
  --purple-600: #534AB7;
  --purple-800: #362E7A;

  /* Paleta teal (Industry Supply, Market Demand) */
  --teal-50:  #E1F5EE;
  --teal-100: #C3EBDC;
  --teal-400: #1D9E75;
  --teal-600: #0F6E56;
  --teal-800: #08402F;

  /* Paleta blue (acentos secundarios) */
  --blue-50:  #E6F1FB;
  --blue-100: #CCE3F7;
  --blue-400: #378ADD;
  --blue-600: #185FA5;
  --blue-800: #0A3565;

  /* Paleta amber (advertencias, ámbar) */
  --amb-50:  #FAEEDA;
  --amb-100: #F5DDB5;
  --amb-400: #BA7517;
  --amb-600: #7C4D0E;

  /* Paleta red (riesgos, alertas) */
  --red-50:  #FBE6E5;
  --red-400: #E24B4A;
  --red-600: #A52826;

  /* Paleta gray (fondos y texto) */
  --gray-50:  #F7F6F2;
  --gray-100: #EDEDEA;
  --gray-200: #D3D1C7;
  --gray-400: #888780;
  --gray-700: #444441;
  --gray-800: #2C2C2A;
  --gray-900: #1A1917;

  --white: #FFFFFF;

  /* Tipografía */
  --ff-display: 'DM Serif Display', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Tamaños fluidos */
  --fs-h1:  clamp(28px, 4vw, 40px);
  --fs-h2:  clamp(20px, 2.5vw, 26px);
  --fs-h3:  clamp(16px, 1.8vw, 18px);
  --fs-body:    14px;
  --fs-small:   12px;
  --fs-xsmall:  11px;

  /* Radios y sombras */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 18px 40px rgba(20,20,60,.18);

  /* Transiciones */
  --t-fast:  .15s;
  --t-mid:   .3s;
  --t-slow:  .6s;
  --ease:    cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --container-max:        1100px;   /* Ancho útil de las herramientas (wizard, paneles) */
  --container-max-cat:    1640px;   /* Catálogo del index.html: aprovecha pantallas grandes */
  --header-h:             60px;
  --sidebar-w:            272px;

  /* Tema activo (default = purple). Cada theme/X.css sobreescribe estas 4: */
  --accent:        var(--purple-600);
  --accent-soft:   var(--purple-50);
  --accent-strong: var(--purple-800);
  --accent-fg:     var(--white);
}