/* ─────────────────────────────────────────────────────────────────────────
   LA MARCA — los mismos tokens de las 66 portadas, los diagramas y la web.
   La app no inventa un sistema visual: hereda el que ya existe.
   Oscuro por defecto (es la marca), claro disponible.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* superficies */
  --tinta:      #14161A;
  --tinta-2:    #1B1E24;
  --tinta-3:    #242830;
  --linea:      #2E333C;
  --crema:      #F5F1E8;
  --crema-mate: #B9B4A8;
  --crema-tenue:#7E7A73;

  /* los dos triángulos */
  --ser:   #57A07C;   /* ▲ propósito */
  --hacer: #6B9FD0;   /* ▼ libertad financiera */
  --oro:   #D9B45E;

  /* estados: sobrios, nunca alarmistas */
  --bien:  #57A07C;
  --ojo:   #D9B45E;
  --duele: #C97A6A;

  --voz: 'Libre Baskerville', Baskerville, 'Palatino Linotype', Palatino, Georgia, serif;
  --ui:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio: 4px;
  --fondo: var(--tinta);
  --papel: var(--tinta-2);
  --alto:  var(--tinta-3);
  --texto: var(--crema);
  --texto-mate: var(--crema-mate);
  --texto-tenue: var(--crema-tenue);
}

:root[data-tema="claro"] {
  --fondo: #FBF9F4;
  --papel: #FFFFFF;
  --alto:  #F1ECE0;
  --linea: #DED7C7;
  --texto: #191B20;
  --texto-mate: #55524B;
  --texto-tenue: #8A867D;
  --ser:   #2A6047;
  --hacer: #3A5E82;
  --oro:   #8A6B1C;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --fondo: #FBF9F4;
    --papel: #FFFFFF;
    --alto:  #F1ECE0;
    --linea: #DED7C7;
    --texto: #191B20;
    --texto-mate: #55524B;
    --texto-tenue: #8A867D;
    --ser:   #2A6047;
    --hacer: #3A5E82;
    --oro:   #8A6B1C;
  }
}

/* 🔴 Principio 2 del diseño: los números son los protagonistas.
   Tabulares SIEMPRE — si una cifra baila al actualizarse, se pierde la
   sensación de instrumento y parece una web. */
.cifra {
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}