/* =====================================================================
   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:            #0f172a;
  --ink-soft:       #475569;
  --muted:          #64748b;
  --faint:          #94a3b8;
  --border:         #e6eaf0;
  --border-soft:    #f1f4f8;
  --bg:             #f6f8fb;
  --surface:        #ffffff;

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

  /* Estados */
  --success:        #16a34a;
  --success-bg:     #e7f7ee;
  --danger:         #dc2626;
  --danger-bg:      #fdecec;
  --warn:           #b45309;
  --warn-bg:        #fef6e7;

  /* Tipografía */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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;

  /* Altura de controles (inputs, selects, search) — consistencia global */
  --control-h: 42px;
  /* Altura de botones de acción — uniforme en todo el sitio */
  --btn-h: 36px;

  /* Bordes y sombras */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 1px 3px rgba(15,23,42,.04), 0 8px 30px rgba(15,23,42,.05);
  --shadow-lg: 0 20px 60px rgba(15,23,42,.20);
}