/* VERTEX — design tokens (fuente: handoff/README.md + prototipos .dc.html) */
:root {
  /* Superficies (modo oscuro, identidad principal) */
  --ink: #0B0E0D;          /* fondo */
  --surface: #14191A;
  --raised: #1E2426;
  --line: #3A4347;

  /* Texto */
  --tx: #F4F2EC;           /* texto principal */
  --tx-soft: #ECECE6;
  --tx-mute: #7E8783;      /* texto apagado */

  /* Acento jade (primario) */
  --jade: #34C88A;
  --jade-dark: #1C7E57;
  --jade-light: #6FE3B0;
  --on-jade: #08110C;      /* texto sobre jade */

  /* Premium champagne */
  --champagne: #C8A96A;
  --champagne-dark: #9C824B;

  /* Superficie cálida (crema) */
  --cream: #F2EEE4;
  --cream-light: #FBF9F4;

  /* Semánticos */
  --pos: #34C88A;          /* positivo / ingreso */
  --neg: #D8714C;          /* negativo / gasto */
  --warn: #E0B252;
  --info: #6FA8E3;

  /* Radios */
  --r-card: 13px;
  --r-btn: 9px;
  --r-input: 10px;
  --r-pill: 999px;

  /* Modal */
  --overlay: rgba(6, 8, 7, .72);
  --blur: blur(5px);

  /* Tipografía */
  --font-display: 'Newsreader', Georgia, serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Espaciado base 4px */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Sombra */
  --shadow: 0 8px 28px rgba(0, 0, 0, .38);
}