/* ============================================================
   WORKSPACE PANEL v4 — TOKEN
   I nomi dei colori, delle misure e delle ombre. Nient'altro.

   E' lo stile dell'interfaccia nuova (quella a /, col logo a
   tre livelli). Lo stile della classica sta in docs/stile/:
   i due kit hanno gli stessi nomi dove si puo', e cambiano i
   valori.

   Ordine di inclusione: 01-token, 02-base, 03-componenti.
   ============================================================ */

:root {
  /* Il tema di partenza e' lo scuro. Il chiaro sta in fondo a questo
     file e si accende con data-theme="light" sull'<html> (lo mette
     js/kit.js, vedi §3 di STILE.md). color-scheme lo dice anche al
     browser, cosi' scrollbar e menu di sistema seguono il tema. */
  color-scheme: dark;

  /* ---- La scala ------------------------------------------------
     Tutto in rem, e 1rem = 10px (lo fa 02-base.css). Questo numero
     ingrandisce insieme testo, spazi e bersagli da toccare. */
  --ui-scale: 1;

  /* L'altezza vera della finestra e lo spazio preso dalla tastiera:
     li scrive il JavaScript (js/kit.js), vedi §1 di STILE.md. */
  --visual-height: 100dvh;
  --keyboard-bottom: 0px;

  /* ---- Le misure dello scheletro ------------------------------- */
  --side-w: 25rem;     /* la spalla: piu' larga della classica, ci stanno le icone */
  --tabs-h: 4.4rem;    /* la barra delle schede di pagina */
  --top-h: 5.6rem;     /* la barra in alto sul telefono (piu' la tacca, vedi 03) */
  --bottom-h: 6.4rem;  /* la barra in basso sul telefono */
  --tap: 4.4rem;       /* 44px: sotto questa misura un dito sbaglia bersaglio */

  /* ---- Fondi ---------------------------------------------------
     Sei piani, dal piu' lontano al piu' vicino. Rispetto alla
     classica sono NEUTRI: non tirano piu' al blu. L'accento e'
     viola, e un fondo bluastro sotto un viola fa sembrare tutto
     sporco. */
  --sunken: #070708;   /* il fondo scavato: output, codice, e dentro i campi */
  --bg: #09090b;       /* la pagina */
  --side: #0c0c0f;     /* la spalla, la barra in alto sul telefono */
  --panel: #111114;    /* la card, il pannello: la superficie normale */
  --panel-2: #16161a;  /* il pannello sopra il pannello, e il fondo dei bottoni */
  --elevated: #1d1d22; /* il bottone sotto il dito, la pastiglia scelta */
  --well: #111114;     /* la vaschetta dei controlli «scegline uno» */

  /* Il vetro: le cose che galleggiano sopra la pagina (la spalla,
     la ricerca, la barra in basso) sono semitrasparenti e sfocano
     quello che c'e' sotto. Il colore e' quello del piano che
     imitano, con un po' d'aria. */
  --glass-side: rgba(12, 12, 15, 0.82);
  --glass: rgba(20, 20, 24, 0.86);
  --glass-solid: rgba(20, 20, 24, 0.96);
  --glass-line: #2a2a31;
  --veil: rgba(0, 0, 0, 0.55);         /* il buio dietro una finestra sopra la pagina */

  /* La luce che viene dall'alto: un filo di bianco in cima a card e
     pannelli. Non si vede finche' non la togli. */
  --sheen: rgba(255, 255, 255, 0.018);
  --sheen-strong: rgba(255, 255, 255, 0.025);
  --hover-wash: rgba(255, 255, 255, 0.04); /* la voce sotto il puntatore */
  --row-wash: rgba(255, 255, 255, 0.015);  /* la riga di un elenco, da ferma */
  --row-hover: rgba(255, 255, 255, 0.03);  /* la stessa riga sotto il puntatore */
  --track: rgba(255, 255, 255, 0.06);      /* il binario vuoto di una barra */
  --edge: rgba(255, 255, 255, 0.06);       /* il filo attorno al logo */
  --strike: rgba(255, 255, 255, 0.2);      /* la riga sopra una cosa fatta */
  --glass-login: rgba(17, 17, 20, 0.8);    /* il riquadro di ingresso */

  /* ---- Righe --------------------------------------------------- */
  --line: #232329;       /* bordi e separatori */
  --line-soft: #1a1a1f;  /* la riga fra due righe, che deve solo accennare */
  --line-hover: #2f2f37; /* il bordo sotto il puntatore */
  --line-strong: #3a3a44;/* il bordo di una casella da spuntare, vuota */

  /* ---- Testo --------------------------------------------------- */
  --text: #ededf0;
  --muted: #8a8a96;
  --faint: #5d5d68;      /* titoletti del menu, date, segnaposto */
  --on-accent: #fff;     /* il testo sopra l'accento pieno */

  /* ---- Accento -------------------------------------------------
     Il viola. Uno solo, come nella classica — ma qui c'e' un motivo
     in piu' per cui non e' piu' il verde: nella classica «sei qui» e
     «funziona» erano lo stesso colore, e una voce di menu attiva
     sembrava un servizio acceso. Adesso il verde vuol dire solo
     «va bene». */
  --accent: #a78bfa;                         /* sei qui: icona, riga, link */
  --accent-strong: #8b5cf6;                  /* l'unico fondo pieno: il bottone che salva */
  --accent-hover: #7c4ff0;
  --accent-soft: rgba(167, 139, 250, 0.13);  /* il velo sulla voce attiva, l'anello del fuoco */
  --accent-line: rgba(167, 139, 250, 0.35);  /* il bordo che si accende sotto il puntatore */
  --accent-glow: rgba(139, 92, 246, 0.25);   /* l'alone del bottone pieno */
  --accent-haze: rgba(139, 92, 246, 0.09);   /* la luce viola in cima alla pagina */
  --info-haze: rgba(96, 165, 250, 0.05);     /* e quella azzurra in fondo, piu' debole */
  --login-haze: rgba(139, 92, 246, 0.16);    /* la luce sopra il riquadro di ingresso */

  /* Il titolo dell'Hub sfuma da qui a qui. */
  --hero-from: #fff;
  --hero-to: #b9b9c6;

  /* L'iniziale delle tessere dei collegamenti, per tipo. */
  --kind-admin: #c4b5fd;
  --kind-sito: #93c5fd;
  --kind-docs: #fcd34d;

  /* La luminosita' degli avatar colorati (il tono lo da' il nome). */
  --avatar-bg-l: 22%;
  --avatar-fg-l: 82%;

  /* I due viola del logo, dal chiaro allo scuro. Stanno solo li'. */
  --logo-top: #7c3aed;
  --logo-bottom: #5b21b6;
  --logo-glow: rgba(91, 33, 182, 0.35);

  /* ---- Semafori ------------------------------------------------
     Piu' accesi di quelli della classica: su un fondo neutro i
     toni smorzati sembravano spenti. Dicono sempre la stessa cosa:
     funziona, guardalo, e' rotto. L'azzurro non e' uno stato: e'
     «vive altrove» (un sito, un server remoto) e «nota». */
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
  --cyan: #60a5fa;
  --on-green: #052e16;   /* la spunta sopra il verde pieno */

  /* Gli stessi, diluiti: il fondo (wash), il bordo (tint) e l'alone
     del pallino (halo). Una cosa che si tinge appena invece di
     accendersi. */
  --wash-ok: rgba(74, 222, 128, 0.08);
  --wash-warn: rgba(251, 191, 36, 0.1);
  --wash-bad: rgba(248, 113, 113, 0.08);
  --wash-info: rgba(96, 165, 250, 0.12);
  --tint-ok: rgba(74, 222, 128, 0.25);
  --tint-warn: rgba(251, 191, 36, 0.3);
  --tint-bad: rgba(248, 113, 113, 0.35);
  --tint-info: rgba(96, 165, 250, 0.3);
  --halo-ok: rgba(74, 222, 128, 0.15);
  --halo-warn: rgba(251, 191, 36, 0.15);
  --halo-bad: rgba(248, 113, 113, 0.15);

  /* ---- Angoli ---------------------------------------------------
     Piu' tondi della classica (0.8 / 1 / 1.4): con le ombre morbide
     un angolo stretto sembrava un errore. */
  --r-sm: 0.9rem;   /* bottoni, campi, voci di menu */
  --r: 1.2rem;      /* card, righe di elenco, tabelle */
  --r-lg: 1.8rem;   /* i pannelli, le tessere dei numeri, le finestre */
  --pill: 999px;

  /* ---- Ombre e movimento ---------------------------------------- */
  --shadow: 0 2rem 6rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-float: 0 1rem 3rem rgba(0, 0, 0, 0.55);   /* la barra in basso */
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 3px rgba(0, 0, 0, 0.4); /* la pastiglia scelta */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);         /* la scheda di pagina attiva */
  --shadow-focus: 0 1rem 3rem rgba(0, 0, 0, 0.3);    /* il riquadro in cui si sta scrivendo */
  --ring: 0 0 0 3px var(--accent-soft);
  --ease: 160ms cubic-bezier(0.2, 0, 0, 1);
  --thumb: #2a2a31;
  --thumb-hover: #3a3a44;

  /* ---- Caratteri ------------------------------------------------
     Inter se c'e' sul sistema, altrimenti quello di sistema. Non si
     scarica niente: la prima schermata non deve aspettare un font. */
  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}


/* ============================================================
   IL TEMA CHIARO
   Gli stessi nomi, i valori per il giorno: il telefono sotto il
   sole, o chi lavora in una stanza illuminata. Qui sotto ci sono
   SOLO i token che cambiano: tutto il resto (misure, angoli,
   caratteri, i due viola del logo) e' lo stesso.

   Non e' lo scuro rovesciato. Tre cose cambiano di natura:
   - i piani: sul chiaro la superficie che si tocca e' la piu'
     chiara (il pannello e' bianco) e la pagina e' un grigio appena
     sotto; i campi restano «buchi», un filo piu' scuri del pannello;
   - l'accento: il viola chiaro dello scuro su bianco non si legge
     (2.7:1). Qui e' il viola pieno del logo, #7c3aed (5.7:1);
   - i semafori: le tinte vivaci su bianco sono illeggibili come
     testo, qui sono quelle scure della stessa famiglia.
   Le ombre fanno il lavoro che sullo scuro facevano i bordi: sul
   bianco un'ombra si vede, sul nero no.
   ============================================================ */

:root[data-theme="light"] {
  color-scheme: light;

  --sunken: #f3f3f6;
  --bg: #f6f6f8;
  --side: #f0f0f3;
  --panel: #ffffff;
  --panel-2: #f4f4f7;
  --elevated: #ffffff;
  --well: #ececf0;     /* sul chiaro la vaschetta e' grigia e la scelta bianca */

  --glass-side: rgba(246, 246, 248, 0.82);
  --glass: rgba(255, 255, 255, 0.86);
  --glass-solid: rgba(255, 255, 255, 0.97);
  --glass-line: #e2e2e8;
  --glass-login: rgba(255, 255, 255, 0.85);
  --veil: rgba(24, 24, 27, 0.28);

  /* Sul bianco la luce dall'alto non si vede: resta solo il filo. */
  --sheen: transparent;
  --sheen-strong: rgba(255, 255, 255, 0.8);
  --hover-wash: rgba(24, 24, 27, 0.045);
  --row-wash: rgba(24, 24, 27, 0.02);
  --row-hover: rgba(24, 24, 27, 0.04);
  --track: rgba(24, 24, 27, 0.08);
  --edge: rgba(24, 24, 27, 0.08);
  --strike: rgba(24, 24, 27, 0.3);

  --line: #e2e2e8;
  --line-soft: #ececf0;
  --line-hover: #cfcfd7;
  --line-strong: #bdbdc7;

  --text: #18181b;
  --muted: #5d5d69;   /* 6.4:1 sul bianco */
  --faint: #74747f;   /* 4.6:1: le date e i titoletti devono leggersi lo stesso */
  --on-accent: #fff;

  --accent: #7c3aed;
  --accent-strong: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-soft: rgba(124, 58, 237, 0.09);
  --accent-line: rgba(124, 58, 237, 0.32);
  --accent-glow: rgba(124, 58, 237, 0.22);
  --accent-haze: rgba(124, 58, 237, 0.07);
  --info-haze: rgba(37, 99, 235, 0.04);
  --login-haze: rgba(124, 58, 237, 0.12);
  --logo-glow: rgba(91, 33, 182, 0.22);

  --hero-from: #18181b;
  --hero-to: #55555f;

  --kind-admin: #6d28d9;
  --kind-sito: #1d4ed8;
  --kind-docs: #a16207;

  --avatar-bg-l: 93%;
  --avatar-fg-l: 32%;

  --green: #15803d;
  --amber: #b45309;
  --red: #dc2626;
  --cyan: #2563eb;
  --on-green: #fff;

  --wash-ok: rgba(21, 128, 61, 0.08);
  --wash-warn: rgba(180, 83, 9, 0.08);
  --wash-bad: rgba(220, 38, 38, 0.07);
  --wash-info: rgba(37, 99, 235, 0.08);
  --tint-ok: rgba(21, 128, 61, 0.3);
  --tint-warn: rgba(180, 83, 9, 0.32);
  --tint-bad: rgba(220, 38, 38, 0.32);
  --tint-info: rgba(37, 99, 235, 0.3);
  --halo-ok: rgba(21, 128, 61, 0.15);
  --halo-warn: rgba(180, 83, 9, 0.15);
  --halo-bad: rgba(220, 38, 38, 0.15);

  --shadow: 0 2rem 6rem rgba(24, 24, 27, 0.14), 0 0 0 1px rgba(24, 24, 27, 0.06);
  --shadow-float: 0 1rem 3rem rgba(24, 24, 27, 0.14);
  --shadow-lift: 0 1px 2px rgba(24, 24, 27, 0.12), 0 0 0 1px rgba(24, 24, 27, 0.06);
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.1);
  --shadow-focus: 0 1rem 3rem rgba(24, 24, 27, 0.08);
  --thumb: #d4d4db;
  --thumb-hover: #b9b9c3;
}