/* ============================================================================
   yourWay (prodotto di Weeko) - token del sistema visivo
   UNICO posto dove vivono colori, raggi, spaziature e motion: lo caricano sia
   l'app (index.html) sia il libretto (guida.html), cosi' le due pagine non
   possono avere palette divergenti.

   PALETTE yourWay. Il viola Weeko resta il colore del marchio e delle azioni
   principali (pulsanti, focus, schede attive, glifo W). L'arancione e' l'accento
   costante e sobrio: parola "your" del logo, badge "IA", contatore delle
   approvazioni in coda, claim (accesso e testata), hover dei link secondari.
   Mai l'arancione su un'azione principale, mai al posto del rosso di errore.

   Rapporti di contrasto WCAG 2.x calcolati a mano (formula della luminanza
   relativa), soglia AA 4.5:1 per il testo normale:
   chiaro  --arancio #c2410c  su --panel #ffffff 5.18 | su --panel-2 #faf8f7 4.89 | su --bg #f4f2f0 4.64
           --on-arancio #ffffff su --arancio-fill #c2410c 5.18
   scuro   --arancio #fb923c  su --bg #17131a 8.11 | su --panel #211c26 7.37 | su --panel-2 #2a2431 6.65
           --on-arancio #17131a su --arancio-fill #fb923c 8.11 (il bianco sopra sarebbe 2.26: no)
   Logo (app/yourway-logo-*.svg, colori fissi perche' caricato via <img>):
   chiaro "your" #c2410c come sopra, "ay" #1e0e4b 15.42 su --bg; scuro "your"
   #fb923c come sopra, "ay" #f4efe7 16.03 su --bg. Il glifo viola e' un marchio
   grafico (soglia 3:1): #7c3aed 5.10 su --bg chiaro, #8b5cf6 3.94 su --panel scuro.
   ============================================================================ */

: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;

  /* arancione yourWay: l'accento costante (rapporti in testa al file).
     --arancio      = TESTO/ICONA su fondo chiaro
     --arancio-fill = FONDO sotto --on-arancio (badge "IA", contatore) */
  --arancio: #c2410c;
  --arancio-fill: #c2410c;
  --on-arancio: #ffffff;

  /* 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 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);

  /* arancione su scuro: piu' chiaro da TESTO; come FONDO vuole sopra un testo scuro,
     come --no-fill (bianco su #fb923c = 2.26:1). */
  --arancio: #fb923c;
  --arancio-fill: #fb923c;
  --on-arancio: #17131a;

  --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; }
}