/* ==========================================================================
   Mondo Gemelli · token di design
   Fonte: docs/superpowers/specs/2026-09-29-mockup-design.md
   Ogni token qui ha un corrispettivo nel ThemeData Flutter (vedi README).

   COLORI: tutto deriva da 5 colori base (--base-*). Il resto si calcola con
   color-mix(in oklab, …), in chiaro (:root) e in notte ([data-theme="notte"]).
   Per cambiare tema basta cambiare i 5 colori base: lo fa tema.js
   (?tema=<id> oppure ?p=&a=&b=&s=&t=), e in Flutter sono i 5 "seed".
   I valori qui sotto sono il tema predefinito "Teal & sabbia": devono restare
   uguali al primo preset in tema.js (lo controlla tools/contrasto.mjs).
   ========================================================================== */


/* .mg-tema: la stessa ricetta su un elemento qualsiasi (la usa tema.js per misurare
   un tema senza applicarlo alla pagina). */
:root,
.mg-tema {
  /* ---- I 5 colori base (brand Mondo Gemelli 2026-09, "teal e cioccolato") */
  --base-primario: #087f89;     /* azioni, barra rapida, link */
  --base-gemello-a: #ce5f34;    /* tutto ciò che riguarda A */
  --base-gemello-b: #562613;    /* tutto ciò che riguarda B */
  --logo-colore-a: #087F89;      /* logo: petrolio del wordmark originale, fisso, indipendente dal tema */
  --logo-colore-b: #562613;      /* logo: marrone del wordmark originale, fisso */
  --base-superficie: #fdfbf4;   /* sfondo dell'app */
  --base-testo: #562613;        /* testo principale */

  /* ---- Costanti non di brand (non cambiano col tema) -------------------- */
  --errore-base: #b3261e;       /* rosso semantico degli errori */
  --pelle-base: #f2b27a;        /* incarnato delle illustrazioni, dal logo */
  --pelle-guance-base: #e98f6b;

  /* ---- Colori derivati (chiaro) ----------------------------------------- */
  --primario: var(--base-primario);
  --primario-tenue: color-mix(in oklab, var(--base-primario) 36%, var(--base-superficie));
  --su-primario: color-mix(in oklab, var(--base-superficie) 60%, #fff);      /* testo e icone su primario */
  --superficie: var(--base-superficie);
  --superficie-alta: color-mix(in oklab, var(--base-superficie) 30%, #fff);  /* card */
  --superficie-bassa: color-mix(in oklab, var(--base-superficie) 94%, var(--base-testo)); /* chip, campi */
  --testo: var(--base-testo);
  --testo-tenue: color-mix(in oklab, var(--base-testo) 82%, var(--base-superficie));

  /* Accento neutro caldo (prima era il giallo "crema", bocciato dalle mamme):
     sabbia più scura della superficie con un filo di primario. I nomi
     --crema / --crema-tenue restano per le schermate, ma ora sono l'accento. */
  --accento: color-mix(in oklab, var(--base-primario) 4%, color-mix(in oklab, var(--base-superficie) 86%, var(--base-testo)));
  --accento-tenue: color-mix(in oklab, var(--base-primario) 3%, color-mix(in oklab, var(--base-superficie) 94%, var(--base-testo)));
  --crema: var(--accento);            /* evidenze, badge "rivisto da" */
  --crema-tenue: var(--accento-tenue);

  --gemello-a: var(--base-gemello-a);
  --gemello-b: var(--base-gemello-b);
  /* testo colorato e riempimenti: il colore del gemello scurito verso il testo, per restare AA */
  --gemello-a-testo: color-mix(in oklab, var(--base-gemello-a) 60%, var(--base-testo));
  --gemello-b-testo: color-mix(in oklab, var(--base-gemello-b) 60%, var(--base-testo));
  --gemello-a-pieno: color-mix(in oklab, var(--base-gemello-a) 74%, var(--base-testo));
  --gemello-b-pieno: color-mix(in oklab, var(--base-gemello-b) 70%, var(--base-testo));
  --su-gemello: color-mix(in oklab, var(--base-superficie) 60%, #fff);
  --gemello-a-tenue: color-mix(in oklab, var(--base-gemello-a) 22%, var(--base-superficie)); /* fondo delle aree A */
  --gemello-b-tenue: color-mix(in oklab, var(--base-gemello-b) 22%, var(--base-superficie)); /* fondo delle aree B */

  --errore: var(--errore-base);
  --errore-tenue: color-mix(in oklab, var(--errore-base) 14%, var(--base-superficie));
  --bordo: color-mix(in oklab, var(--base-testo) 11%, var(--base-superficie));        /* bordi delle card */
  --bordo-forte: color-mix(in oklab, var(--base-testo) 20%, var(--base-superficie));
  --contorno: color-mix(in oklab, var(--base-testo) 84%, var(--base-superficie));     /* contorno delle illustrazioni */
  --pelle: var(--pelle-base);
  --pelle-guance: var(--pelle-guance-base);
  --velo: color-mix(in oklab, var(--base-testo) 42%, transparent);
  --ombra: 0 1px 0 color-mix(in oklab, var(--base-testo) 6%, transparent), 0 6px 18px color-mix(in oklab, var(--base-testo) 8%, transparent);
  --ombra-alta: 0 2px 0 color-mix(in oklab, var(--base-testo) 8%, transparent), 0 14px 32px color-mix(in oklab, var(--base-testo) 16%, transparent);
  --ombra-premuto: inset 0 2px 0 color-mix(in oklab, var(--base-testo) 18%, transparent);
  --premuto-velo: color-mix(in oklab, var(--base-testo) 12%, transparent);

  /* ---- Tipografia ------------------------------------------------------ */
  --font-titoli: "Fredoka", system-ui, sans-serif;   /* 600, font del brand */
  --font-testo: "Nunito", system-ui, sans-serif;     /* 400 / 700 / 800 */
  --peso-titolo: 600;
  --peso-testo: 400;
  --peso-forte: 700;
  --peso-numero: 800;

  --t-didascalia: 13px;   /* minimo assoluto */
  --t-piccolo: 15px;
  --t-testo: 17px;
  --t-titolo-s: 19px;
  --t-titolo: 23px;
  --t-titolo-l: 29px;
  --t-numero: 28px;       /* "2h 10m" nelle schede di oggi */
  --t-numero-xl: 64px;    /* "22+4" */
  --interlinea: 1.45;
  --interlinea-stretta: 1.15;

  /* ---- Spaziatura (base 4) --------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* ---- Forma ----------------------------------------------------------- */
  --r-card: 16px;
  --r-pulsante: 28px;     /* pulsanti principali e barra rapida */
  --r-chip: 999px;
  --r-piccolo: 8px;
  --tocco-min: 56px;      /* area minima di tocco, 56 dp */
  --bordo-sottile: 1px;
  --bordo-spesso: 2px;
  --icona: 24px;
  --icona-s: 18px;
  --icona-l: 28px;
  --avatar: 48px;
  --avatar-s: 32px;

  /* ---- Solo per i mockup (non vanno nel ThemeData) --------------------- */
  /* Valori FISSI, fuori dal tema: il telefono è un telefono vero (scocca e isola
     scure) e il "tavolo" dietro resta neutro. Col tema cambia solo l'app. */
  --mk-tavolo: #ebe6df;         /* sfondo della pagina dietro i telefoni */
  --mk-tavolo-testo: #2b2622;
  --mk-tavolo-tenue: #5f574f;   /* 6,1:1 sul tavolo */
  --mk-cornice: #1c1a19;        /* scocca del telefono */
  --mk-cornice-luce: #3a3634;
  --mk-schermo-l: 390px;
  --mk-schermo-h: 844px;
  --mk-scocca: 12px;
  --mk-r-scocca: 58px;
  --mk-r-schermo: 46px;
  --mk-barra-stato: 48px;
  --mk-indicatore: 30px;
  --mk-tocco: 76px;             /* anello che mostra il tocco del pollice */

  color-scheme: light;
}

/* ==========================================================================
   Modalità notte: calda, a contrasto ridotto, niente bianco puro,
   accenti attenuati. Si usa alle 3 di notte con un bambino in braccio.
   Deriva dagli stessi 5 colori base: il fondo scuro nasce dal testo con un
   filo di primario, gli accenti sono i colori base schiariti verso la superficie.
   ========================================================================== */
/* Estremi della ricetta scura: --notte-fondo (scuro) e --n-chiaro (chiaro). */
[data-theme="notte"] {
  --notte-fondo: color-mix(in oklab, color-mix(in oklab, var(--base-testo) 28%, #0c0e0e) 86%, var(--base-primario));
  --n-chiaro: var(--base-superficie);
}
/* Sfondo personalizzato scuro (lo segnala tema.js con data-sfondo="scuro"): la superficie
   è già il fondo scuro e il testo chiaro fa da estremo chiaro. Di notte si scurisce ancora. */
[data-sfondo="scuro"] {
  --notte-fondo: var(--base-superficie);
  --n-chiaro: var(--base-testo);
}
[data-sfondo="scuro"][data-theme="notte"] {
  --notte-fondo: color-mix(in oklab, var(--base-superficie) 60%, #0c0e0e);
  --n-chiaro: color-mix(in oklab, var(--base-testo) 92%, #0c0e0e);
}
/* La ricetta scura, uguale per la notte e per gli sfondi scuri. */
[data-theme="notte"],
[data-sfondo="scuro"] {
  --primario: color-mix(in oklab, var(--base-primario) 58%, var(--n-chiaro));
  --primario-tenue: color-mix(in oklab, var(--base-primario) 42%, var(--notte-fondo));
  --su-primario: var(--notte-fondo);
  --superficie: var(--notte-fondo);
  --superficie-alta: color-mix(in oklab, var(--notte-fondo) 90%, var(--n-chiaro));
  --superficie-bassa: color-mix(in oklab, var(--notte-fondo) 87%, var(--n-chiaro));
  --testo: color-mix(in oklab, var(--n-chiaro) 90%, var(--notte-fondo));   /* mai bianco puro */
  --testo-tenue: color-mix(in oklab, var(--n-chiaro) 66%, var(--notte-fondo));

  --accento: color-mix(in oklab, var(--base-primario) 18%, color-mix(in oklab, var(--notte-fondo) 76%, var(--n-chiaro)));
  --accento-tenue: color-mix(in oklab, var(--base-primario) 8%, color-mix(in oklab, var(--notte-fondo) 90%, var(--n-chiaro)));
  --crema: var(--accento);
  --crema-tenue: var(--accento-tenue);

  --gemello-a: color-mix(in oklab, var(--base-gemello-a) 68%, var(--n-chiaro));
  --gemello-b: color-mix(in oklab, var(--base-gemello-b) 52%, var(--n-chiaro));
  --gemello-a-testo: color-mix(in oklab, var(--base-gemello-a) 52%, var(--n-chiaro));
  --gemello-b-testo: color-mix(in oklab, var(--base-gemello-b) 28%, var(--n-chiaro));
  --gemello-a-pieno: color-mix(in oklab, var(--base-gemello-a) 55%, var(--n-chiaro));
  --gemello-b-pieno: color-mix(in oklab, var(--base-gemello-b) 45%, var(--n-chiaro));
  --su-gemello: var(--notte-fondo);
  --gemello-a-tenue: color-mix(in oklab, var(--base-gemello-a) 30%, var(--notte-fondo));
  --gemello-b-tenue: color-mix(in oklab, var(--base-gemello-b) 27%, var(--notte-fondo));

  --errore: color-mix(in oklab, var(--errore-base) 40%, var(--n-chiaro));
  --errore-tenue: color-mix(in oklab, var(--errore-base) 22%, var(--notte-fondo));
  --bordo: color-mix(in oklab, var(--notte-fondo) 88%, var(--n-chiaro));
  --bordo-forte: color-mix(in oklab, var(--notte-fondo) 60%, var(--n-chiaro));
  --contorno: color-mix(in oklab, var(--n-chiaro) 58%, var(--notte-fondo));
  --pelle: color-mix(in oklab, var(--pelle-base) 82%, var(--notte-fondo));
  --pelle-guance: color-mix(in oklab, var(--pelle-guance-base) 80%, var(--notte-fondo));
  --velo: color-mix(in oklab, #050706 62%, transparent);
  --ombra: 0 1px 0 color-mix(in oklab, #000 25%, transparent), 0 6px 18px color-mix(in oklab, #000 25%, transparent);
  --ombra-alta: 0 2px 0 color-mix(in oklab, #000 30%, transparent), 0 14px 32px color-mix(in oklab, #000 45%, transparent);
  --ombra-premuto: inset 0 2px 0 color-mix(in oklab, #000 35%, transparent);
  --premuto-velo: color-mix(in oklab, var(--n-chiaro) 10%, transparent);

  color-scheme: dark;
}

/* Numeri grandi: cifre tabellari */
.numero,
.numero-xl {
  white-space: nowrap;
  font-family: var(--font-testo);
  font-weight: var(--peso-numero);
  font-variant-numeric: tabular-nums;
  line-height: var(--interlinea-stretta);
}
.numero { font-size: var(--t-numero); }
.numero-xl { font-size: var(--t-numero-xl); letter-spacing: -0.02em; }