/* Color — dos modos. El OSCURO es el canónico (grafito + menta).
   El CLARO es su inversión: superficies claras, texto oscuro,
   conservando el mismo acento menta y estado coral.
   El modo oscuro se activa con [data-theme="dark"] o la clase .dark. */

:root {
  /* Superficies (invertidas del oscuro) */
  --bg: #eef1f0;
  --surface: #ffffff;
  --surface-alt: #f4f6f5;
  --line: #d9dedd;

  /* Texto (invertido del oscuro) */
  --ink: #101418;
  --muted: #6b7370;

  /* Acento (mismo que oscuro) */
  --accent: #4fd1a5;
  --accent-hover: #3cbb90;
  --accent-ink: #0c3a2c;      /* texto sobre --accent */
  --accent-soft: #dcefe7;     /* fondo suave de acento */

  /* Estado (mismo que oscuro) */
  --danger: #f0876f;
  --positive: #4fd1a5;

  /* Pistas de progreso / tracks */
  --track: #e4e8e7;

  /* Sombra */
  --shadow-card: 0 1px 3px rgba(16, 20, 24, 0.06);
  --shadow-pop: 0 8px 24px rgba(16, 20, 24, 0.12);
}

[data-theme="dark"],
.dark {
  /* Canónico: grafito + menta. */
  --bg: #101418;
  --surface: #1a2026;
  --surface-alt: #161b20;
  --line: #2a333a;

  --ink: #eef2f0;
  --muted: #8b9299;

  --accent: #4fd1a5;
  --accent-hover: #63dcb2;
  --accent-ink: #0c3a2c;
  --accent-soft: #22303a;

  --danger: #f0876f;
  --positive: #4fd1a5;
  --accent-text: #63dcb2;     /* menta clara: texto sobre --accent-soft oscuro */

  --track: #2a333a;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);
}