/* ============================================================================
   MIRANDA - token del sistema visivo (proposta v2, 25/07/2026)
   UNICO posto dove vivono colori, raggi, spaziature e motion: lo caricano sia
   l'app (index.html) sia il libretto (guida.html). Prima erano due palette
   copiate a mano in due file, libere di divergere.
   ============================================================================ */

:root {
  /* superfici (neutri caldi con sottotono viola: legano col brand senza freddarlo) */
  --bg: #f4f2f0;
  --panel: #ffffff;
  --panel-2: #faf8f7;
  --line: #e6e1dd;
  --line-soft: #efeae6;

  /* testo */
  --text: #2a2430;          /* 14.6:1 su --bg */
  --muted: #6b6470;         /* 5.1:1 su --bg - resta leggibile a 12px */

  /* accento: due mestieri diversi, due token diversi
     --accent  = FONDO sotto testo bianco (bianco su #7c3aed = 5.70:1)
     --accent-ink = TESTO/ICONA su fondo chiaro (#6d28d9 su bianco = 7.10:1) */
  --accent: #7c3aed;
  --accent-ink: #6d28d9;
  --accent-strong: #5b21b6; /* premuto/hover */
  --accent-soft: #ede9fe;   /* riempimenti leggeri, chip */
  --accent-ring: rgba(124, 58, 237, .32);
  /* Uguale nei due temi: serve dove il fondo e' bianco PIENO comunque vada
     (bottone dentro il banner viola). #a78bfa su bianco sarebbe 2,72:1. */
  --accent-su-bianco: #6d28d9;

  /* semantici */
  --ok: #15803d;            /* bianco sopra = 5.0:1 */
  --ok-soft: #dcfce7;
  --no: #b42318;            /* TESTO di errore */
  --no-fill: #b42318;       /* FONDO distruttivo, sotto --on-no */
  --on-no: #ffffff;
  --no-soft: #fee4e2;
  --warn: #a16207;
  --warn-soft: #fef3c7;

  --overlay-soft: rgba(42, 36, 48, .055); /* citazioni, code */
  --scrim: rgba(26, 20, 32, .5);

  /* raggi */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --radius: var(--r-lg); /* alias storico usato da .approval/.settings-group/.sheet */

  /* ombre calde (mai nere pure: su fondo greige il nero puro "buca") */
  --sh-1: 0 1px 2px rgba(42, 36, 48, .06);
  --sh-2: 0 4px 16px rgba(42, 36, 48, .10);
  --sh-3: 0 14px 44px rgba(42, 36, 48, .18);

  /* passo di spaziatura: 4 - 8 - 12 - 16 - 24 - 32 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* motion: una sola curva e due durate in tutta l'app */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .14s;
  --t-slow: .24s;
}

/* Scuro: caldo anche qui (base prugna, non blu). L'accento di RIEMPIMENTO resta #7c3aed
   perche' e' l'unico che regge il bianco sopra (4.24:1 con #8b5cf6, sotto AA);
   #8b5cf6 resta il colore dei MARCHI su scuro come da brand, #a78bfa e' il testo. */
:root[data-theme="dark"] {
  --bg: #17131a;
  --panel: #211c26;
  --panel-2: #2a2431;
  --line: #3a3342;
  --line-soft: #322b3a;

  --text: #ede8ef;          /* 13.9:1 su --bg */
  --muted: #a79eaa;         /* 6.4:1 su --panel */

  --accent: #7c3aed;        /* fondo: bianco sopra = 5.70:1 */
  --accent-ink: #a78bfa;    /* testo/icona: 6.7:1 su --bg */
  --accent-strong: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, .18);
  --accent-ring: rgba(167, 139, 250, .38);

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .16);
  --no: #f87171;
  /* Su scuro il rosso da TESTO e' chiaro: come FONDO vuole sopra un testo scuro,
     non bianco (bianco su #f87171 = 2,77:1). */
  --no-fill: #f87171;
  --on-no: #17131a;
  --no-soft: rgba(248, 113, 113, .16);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .16);

  --overlay-soft: rgba(255, 255, 255, .07);
  --scrim: rgba(8, 5, 12, .62);

  --sh-1: 0 1px 2px rgba(0, 0, 0, .34);
  --sh-2: 0 4px 16px rgba(0, 0, 0, .42);
  --sh-3: 0 14px 44px rgba(0, 0, 0, .55);
}

/* Nel tema scuro il bianco pieno sui fondi ampi abbaglia: il testo dentro le
   bolle/bottoni accento resta bianco (serve il 5.70:1), tutto il resto usa --text. */


/* Un solo anello di focus per tutta l'app: visibile da tastiera, invisibile al tocco. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Disabilitato: sempre lo stesso trattamento, mai un grigio inventato caso per caso */
:where(button, input, select, textarea):disabled,
[aria-disabled="true"] { opacity: .45; cursor: default; }

/* Icone: un solo formato (24, tratto 1.75, currentColor). Le emoji restano solo
   dove sono CONTENUTO (reazioni ai messaggi), mai come simbolo di comando. */
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ico-sm { width: 17px; height: 17px; }
.ico-lg { width: 22px; height: 22px; }
.ico-fill { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}