/*
 * Sistema de color — Verde Salvia Cálido / Pistacho Suave.
 *
 * Tema claro de baja fatiga visual. Los tonos de verde nunca se usan como fondo de
 * texto pequeño: el contraste lo aporta siempre el antracita, que sobre las superficies
 * pálidas supera holgadamente el 4.5:1 exigido por WCAG 2.1 AA.
 */

:root {
  /* Marca */
  --color-primary: #b4c59d;          /* verde salvia cálido: acentos, gráficos, foco */
  --color-primary-strong: #8ba172;   /* variante oscura para texto sobre claro y estados hover */
  --color-primary-deep: #5f7449;     /* acción principal: contraste AA sobre superficies claras */
  --color-primary-soft: #d5e0c6;     /* rellenos suaves, barras secundarias */

  /* Superficies */
  --color-surface: #ffffff;          /* tarjetas */
  --color-surface-muted: #e8efe0;    /* verde matcha pálido: fondo de tarjeta destacada */
  --color-background: #f6f8f2;       /* lienzo de la aplicación */
  --color-border: #dde4d3;

  /* Texto */
  --color-text: #24291f;             /* antracita: texto principal */
  --color-text-secondary: #5a6152;   /* etiquetas y textos de apoyo */
  --color-text-inverse: #ffffff;

  /* Semántica financiera */
  --color-positive: #4b7a4a;         /* ingresos, superávit */
  --color-negative: #b3524a;         /* gastos, déficit */
  --color-warning: #b58330;          /* viable pero ajustada */
  --color-danger: #a8443c;           /* inviable */
  --color-info: #4a6f8a;

  /* Escala categórica para gráficos: legible en secuencia y distinguible en escala de grises */
  --chart-1: #8ba172;
  --chart-2: #b4c59d;
  --chart-3: #6f8f86;
  --chart-4: #c9b27f;
  --chart-5: #9a8fa8;
  --chart-6: #7d9bb5;

  /* Tipografía */
  --font-sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-numeric: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;

  /* Espaciado y forma */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(36, 41, 31, 0.06), 0 8px 24px rgba(36, 41, 31, 0.05);

  /* Seguridad de área en iOS cuando la PWA corre a pantalla completa */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * El requisito es tema claro. Se declara el esquema explícitamente para que iOS no
 * aplique su inversión automática y desfigure la paleta.
 */
:root {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Los importes se alinean por dígito: comparar columnas de euros exige ancho fijo. */
.amount {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

.amount--positive { color: var(--color-positive); }
.amount--negative { color: var(--color-negative); }

/* El foco visible nunca se elimina: es el único modo de navegar con teclado. */
:focus-visible {
  outline: 2px solid var(--color-primary-deep);
  outline-offset: 2px;
}