/* =========================================================
   Design token: tutte le scelte visive in un solo posto.
   Cambiando un valore qui cambia in tutta l'app.
   ========================================================= */

:root {
  /* Font */
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Manrope', var(--font-ui);

  /* Scala tipografica (1rem = 16px) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* Spazi: multipli di 4px */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --tap: 44px;      /* area di tocco minima consigliata */
  --nav-h: 64px;    /* altezza barra in basso su mobile */

  /* Ombra solo per ciò che "galleggia" (FAB, pannelli) */
  --shadow-float: 0 6px 20px rgb(0 0 0 / 0.14), 0 1px 3px rgb(0 0 0 / 0.1);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.08);  /* opzione scelta nei controlli a segmenti */

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 160ms;

  /* ---------- Tema chiaro (predefinito): i colori di Jess ----------
     beige come base, verde quasi turchese per le azioni, rosso per i dettagli */
  color-scheme: light;
  --bg: #f4eee4;          /* beige: sfondo pagina */
  --surface: #fffdf9;     /* bianco caldo: liste, pannelli */
  --surface-2: #ece4d6;   /* beige più scuro: fascia lavoro, tracce, hover */
  --border: #e2d8c8;
  --border-strong: #c9bca7;
  --text: #22201c;
  --text-2: #5a5247;      /* testo secondario */
  --text-3: #75695a;      /* meta, etichette (contrasto AA su bianco e su --bg) */
  --accent: #0b6f67;      /* verde-turchese scuro: pulsanti, testo bianco leggibile (contrasto 6:1) */
  --on-accent: #ffffff;
  --focus: #0b6f67;
  --danger: #a3221b;      /* errori: più scuro del rosso di Jess, per non confonderli */
  --warning: #a15c07;
  --now: #d0443c;         /* rosso di Jess: linea dell'ora attuale */

  /* Colori del marchio (schermata di accesso e icona) */
  --mark-1: #0f8f84;
  --mark-2: #d0443c;
  --mark-3: #8a6a4a;

  /* Grafici dei soldi: entrate verde-turchese, uscite rosse
     (coppia verificata con lo script della skill dataviz: daltonismo e contrasto) */
  --chart-in: #0f8f84;
  --chart-out: #d0443c;

  /* Quanto "schiarire" i colori delle aree (0% in chiaro, vedi tema scuro) */
  --area-lift: 0%;
}

/* ---------- Tema scuro ----------
   Definito due volte: una per chi ha il sistema in scuro (e non ha scelto "chiaro"),
   una per chi sceglie "scuro" a mano. Il CSS puro non permette di evitarlo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1814;            /* marrone molto scuro, non nero: resta caldo come il beige */
    --surface: #221e19;
    --surface-2: #2c2721;
    --border: #383128;
    --border-strong: #4f463b;
    --text: #f1ebe2;
    --text-2: #c4b9aa;
    --text-3: #a2968a;
    --accent: #2fa89c;
    --on-accent: #10201e;
    --focus: #5cc8bc;
    --danger: #ff8a80;
    --warning: #f5a524;
    --now: #e0584f;
    --area-lift: 30%;
    --shadow-float: 0 6px 20px rgb(0 0 0 / 0.5);
    --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.4);
    --chart-in: #2fa89c;
    --chart-out: #e0584f;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1814;            /* marrone molto scuro, non nero: resta caldo come il beige */
  --surface: #221e19;
  --surface-2: #2c2721;
  --border: #383128;
  --border-strong: #4f463b;
  --text: #f1ebe2;
  --text-2: #c4b9aa;
  --text-3: #a2968a;
  --accent: #2fa89c;
  --on-accent: #10201e;
  --focus: #5cc8bc;
  --danger: #ff8a80;
  --warning: #f5a524;
  --now: #e0584f;
  --area-lift: 30%;
  --shadow-float: 0 6px 20px rgb(0 0 0 / 0.5);
  --shadow-subtle: 0 1px 2px rgb(0 0 0 / 0.4);
  --chart-in: #2fa89c;
  --chart-out: #e0584f;
}

/* Colore dell'area: ogni elemento con data-area riceve --area (dal JS)
   e qui lo adattiamo al tema. In scuro viene mischiato col bianco per restare leggibile. */
[data-area] {
  --area-c: color-mix(in oklab, var(--area), white var(--area-lift));
  --area-soft: color-mix(in oklab, var(--area-c) 14%, var(--surface));
}