/* ============================================================================
   EVALIA — Design Tokens
   Paleta SaaS B2B europeo: institucional, sobria, profesional.
   ============================================================================ */

:root {
  /* --- Surfaces (azul/gris muy sutil) --- */
  --surface:        #F7FAFD;
  --surface-bright: #FFFFFF;
  --surface-dim:    #EEF3F9;
  --surface-hover:  #E6EDF5;

  /* --- Ink (azul marino oscuro) --- */
  --on-surface:        #07162F;
  --on-surface-muted:  #4A5A75;
  --on-surface-faint:  #8A97AD;

  /* --- Brand corporativo --- */
  --primary:       #0D3A78;
  --primary-alt:   #123E7C;
  --primary-soft:  #DDEFFF;
  --on-primary:    #FFFFFF;

  /* --- Semantic (estados) --- */
  --success:       #2F8B4B;
  --success-soft:  #E1F2E5;
  --warn:          #B98520;
  --warn-soft:     #FCEFD7;
  --danger:        #7A1B26;
  --danger-soft:   #F8E3E5;
  --purple:        #7B237D;
  --purple-soft:   #F2E1F2;
  --info:          #0D3A78;
  --info-soft:     #DDEFFF;

  /* --- Risk levels (texto) --- */
  --r-prohibido:      var(--danger);
  --r-prohibido-soft: var(--danger-soft);
  --r-alto:           var(--warn);
  --r-alto-soft:      var(--warn-soft);
  --r-limitado:       var(--success);
  --r-limitado-soft:  var(--success-soft);
  --r-minimo:         var(--success);
  --r-minimo-soft:    var(--success-soft);
  --r-fuera:          var(--on-surface-muted);
  --r-fuera-soft:     var(--surface-dim);

  /* --- Lines --- */
  --line:        #D6E0EA;
  --line-strong: #B7C5D6;
  --line-soft:   #E5EBF2;

  /* --- Typography --- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-36: 36px;
  --fs-40: 40px;
  --fs-48: 48px;

  /* --- Geometry --- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r:     10px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* --- Space scale --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* --- Shadows (suaves, realistas) --- */
  --sh-xs: 0 1px 2px 0 rgb(7 22 47 / .04);
  --sh-sm: 0 1px 3px 0 rgb(7 22 47 / .06), 0 1px 2px 0 rgb(7 22 47 / .04);
  --sh-md: 0 4px 10px -2px rgb(7 22 47 / .06), 0 2px 4px -2px rgb(7 22 47 / .04);
  --sh-lg: 0 12px 28px -8px rgb(7 22 47 / .10), 0 4px 10px -4px rgb(7 22 47 / .06);
  --sh-xl: 0 24px 56px -16px rgb(7 22 47 / .18), 0 8px 16px -8px rgb(7 22 47 / .08);
  --sh-focus: 0 0 0 3px rgb(13 58 120 / .15);
  --sh-inset: inset 0 1px 2px rgb(7 22 47 / .04);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.4,0,.2,1);
  --t-fast:   130ms var(--ease-io);
  --t-base:   200ms var(--ease-out);
  --t-slow:   320ms var(--ease-out);

  /* --- Layout --- */
  --topbar-h:  60px;
  --container: 1168px;
}