/* ==========================================================================
   Tokens de diseño — Product V0.2
   ==========================================================================

   Este archivo define el vocabulario visual: espaciado, radios, tipografía,
   alturas de control y colores con significado. Se carga ANTES de style.css.

   Dos reglas para que esto siga sirviendo de algo:

   1. Ningún valor suelto en el resto del CSS. Si necesitas un espacio, sale
      de la escala. Si no cabe en la escala, el problema es el diseño.

   2. Los colores con significado se definen aquí como alias de las variables
      de tema de style.css (--good, --critical, --warn…). Como var() se
      resuelve al usarse y no al declararse, el alias hereda solo el valor
      correcto en claro, oscuro y terminal. No dupliques bloques de tema.

   Esto NO es un design system de empresa. Es lo mínimo para que dos tarjetas
   separadas por 400 líneas de CSS tengan el mismo padding.
   ========================================================================== */

:root {
  /* --- Espaciado -------------------------------------------------------
     Escala de 4. Todo padding, gap y margen sale de aquí. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- Radios ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* --- Tipografía ------------------------------------------------------
     Siete tamaños. La cifra principal de Inicio usa --text-hero; nada más
     debería usarlo. */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-display: 34px;
  --text-hero: 44px;

  --weight-normal: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  /* Cifras alineadas en columna: sin esto los montos bailan al actualizarse. */
  --numeric: tabular-nums;

  /* --- Alturas de control ----------------------------------------------
     Mínimo táctil de 44px (guía de Apple). No bajar de ahí en nada que se
     pueda tocar. */
  --control-height: 44px;
  --input-height: 48px;
  --row-height: 56px;
  --nav-height: 64px;

  /* --- Colores con significado -----------------------------------------
     El color comunica, no decora. Un gasto normal NO es un error: los montos
     se distinguen por signo y peso tipográfico, no por rojo. */
  --positive: var(--good);        /* entra dinero, algo está bien */
  --negative: var(--critical);    /* problema real, no un gasto normal */
  --attention: var(--warn);       /* necesita que decidas algo */
  --neutral: var(--text-muted);   /* sin carga: la mayoría de las cosas */
  /* --info se define por tema en style.css: ya nace con nombre semántico y
     no necesita alias. */

  /* --- Superficies -----------------------------------------------------
     Alias con nombres consistentes sobre las variables de tema que ya
     existían, para no tener dos vocabularios compitiendo. */
  --bg: var(--page);
  --surface: var(--surface-1);
  --line: var(--border);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
}