/* =====================================================
   RRHH Tools — Design Tokens "Herramienta"
   Línea gráfica: utility product, mobile-first
   ===================================================== */
:root {
  /* Superficies */
  --rrhh-bg:           #F6F4EE;
  --rrhh-surface:      #FFFFFF;
  --rrhh-surface-2:    #FBF9F2;
  --rrhh-rule:         #E4E1D8;
  --rrhh-rule-strong:  #CFC9B9;

  /* Tinta */
  --rrhh-ink:          #0F1B2D;
  --rrhh-ink-dim:      #5A6573;
  --rrhh-ink-soft:     #97A0AC;

  /* Marca */
  --rrhh-primary:      #16785A;  /* verde billete */
  --rrhh-primary-dark: #0E5A42;
  --rrhh-primary-soft: #DCEEE6;
  --rrhh-accent:       #F2A93B;  /* amber CTA */
  --rrhh-accent-dark:  #C7831B;
  --rrhh-accent-soft:  #FCEFD3;

  /* Semántico */
  --rrhh-danger:       #D14747;
  --rrhh-danger-soft:  #FBE3E3;
  --rrhh-info:         #2563EB;
  --rrhh-success:      #16785A;

  /* Tipografía */
  --rrhh-font-sans:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --rrhh-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Escala (mobile-first, clamp en titulares) */
  --rrhh-text-xs:   12px;
  --rrhh-text-sm:   14px;
  --rrhh-text-md:   16px;
  --rrhh-text-lg:   18px;
  --rrhh-text-xl:   22px;
  --rrhh-text-2xl:  28px;
  --rrhh-text-3xl:  clamp(32px, 4vw, 44px);
  --rrhh-text-4xl:  clamp(40px, 6vw, 64px);

  /* Spacing */
  --rrhh-s-1:  4px;
  --rrhh-s-2:  8px;
  --rrhh-s-3:  12px;
  --rrhh-s-4:  16px;
  --rrhh-s-5:  24px;
  --rrhh-s-6:  32px;
  --rrhh-s-8:  48px;
  --rrhh-s-10: 64px;

  /* Radio */
  --rrhh-radius-sm:   8px;
  --rrhh-radius:      14px;
  --rrhh-radius-lg:   22px;
  --rrhh-radius-pill: 999px;

  /* Sombra */
  --rrhh-shadow-sm:    0 1px 2px rgba(15, 27, 45, 0.06);
  --rrhh-shadow:       0 6px 18px -8px rgba(15, 27, 45, 0.18);
  --rrhh-shadow-lg:    0 18px 40px -20px rgba(15, 27, 45, 0.30);
  --rrhh-shadow-press: 0 4px 0 var(--rrhh-ink);

  /* Transiciones */
  --rrhh-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rrhh-duration: 180ms;
}