/* ============================================================== *
 * design-tokens.css — Sistema de diseño (estética Airbnb)
 * Único lugar para colores, tipografía, formas y espacios.
 * ============================================================== */
:root {
  /* Color de marca / acentos */
  --rausch:    #FF5A5F;   /* coral — CTA y acentos (con moderación) */
  --rausch-d:  #E04347;
  --babu:      #00A699;   /* teal — positivo / NOI / ingresos */
  --arches:    #FC642D;   /* naranja — atención / vence pronto */

  /* Texto y superficies */
  --hof:       #222222;   /* texto principal */
  --foggy:     #717171;   /* texto secundario */
  --line:      #EBEBEB;   /* bordes / divisores */
  --bg:        #FFFFFF;   /* fondo de cards */
  --bg-soft:   #F7F7F7;   /* fondo de página */

  /* Semánticos */
  --ok:        #008A05;   /* delta positivo */
  --bad:       #C13515;   /* delta negativo / mora */
  --ok-soft:   #E6F4ec;
  --bad-soft:  #FBEAE5;
  --babu-soft: #E0F3F1;
  --arches-soft:#FEEDE4;

  /* Tipografía */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Forma y profundidad */
  --radius-card:  16px;
  --radius-med:   12px;
  --radius-pill:  999px;
  --radius-input: 10px;
  --shadow-rest:  0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-hover: 0 6px 20px rgba(0,0,0,.12);
  --shadow-card:  0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);

  /* Espaciado base 8px */
  --s1: 8px;  --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 40px;

  /* Data-viz */
  --viz-pos:  #00A699;
  --viz-neg:  #FF5A5F;
  --viz-neutral: #717171;
  --viz-grid: #EBEBEB;
}