/* ───────────────────────────────────────────────────────────
   TEMA. Todo lo que define "cómo se ve" está aquí: colores y letras.
   Cambia estos valores y toda la app cambia. No hace falta tocar app.css.
   Paleta inspirada en el billete de colón: papel gris verdoso,
   tinta azul petróleo y un azul cobalto de acento.
   ─────────────────────────────────────────────────────────── */
:root {
  --paper: #e6ece9;        /* fondo de la página */
  --paper-deep: #d3ddd9;   /* fondo de la regla, barras vacías */
  --surface: #f5f8f6;      /* campos, paneles */
  --ink: #0f2a33;          /* texto principal y líneas fuertes */
  --ink-soft: #4a6169;     /* texto secundario */
  --rule: #bccac5;         /* líneas finas */

  --accent: #2f45d6;       /* acento principal (cobalto) */
  --accent-ink: #ffffff;   /* texto sobre el acento */

  --ok: #2e8b63;
  --warn: #c9820a;
  --bad: #c23b3b;

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --radius: 5px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d1d23;
    --paper-deep: #1a3039;
    --surface: #132830;
    --ink: #e4efec;
    --ink-soft: #92a9b0;
    --rule: #28434d;

    --accent: #8d9dff;
    --accent-ink: #0d1d23;

    --ok: #5cc79a;
    --warn: #e8b04a;
    --bad: #ef7c7c;
  }
}