/* =====================================================================
   tokens.css — Design tokens del Portal de Nómina v2
   Variables de color, tipografía y espaciado. Único lugar donde se
   definen; el resto del CSS las consume. Cambiar marca = cambiar aquí.
   ===================================================================== */
:root {
  /* Paleta */
  --ink:            #1e293b;
  --ink-soft:       #475569;
  --muted:          #64748b;
  --faint:          #94a3b8;
  --border:         #e2e8f0;
  --border-soft:    #f1f5f9;
  --bg:             #f8fafc;
  --surface:        #ffffff;

  /* Marca / acentos */
  --brand:          #2563eb;
  --brand-dark:     #1d4ed8;
  --brand-bg:       #eff6ff;

  /* Estados */
  --success:        #059669;
  --success-bg:     #d1fae5;
  --danger:         #dc2626;
  --danger-bg:      #fee2e2;
  --warn:           #d97706;
  --warn-bg:        #fef3c7;

  /* Tipografía */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 14px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;

  /* Espaciado */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* Bordes y sombras */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
}