/* La pelle comune degli strumenti del Training: il carattere, l'accento e i
   grigi caldi del portfolio (leonardomaltese.it), su fondo scuro.
   Si collega dopo il CSS dello strumento, cosi' vince su quello.
   I grigi delle classi Tailwind (bg-neutral-800, text-neutral-500…) li
   scalda brand.js; qui c'e' quello che Tailwind non copre. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap');

:root{
  /* l'arancione delle cartelle del sito */
  --accent:#FF8800;
  --on-accent:hsl(30 12% 8%);
  /* gli stessi nomi che usano gia' Blur e gli altri strumenti con le variabili:
     cambiandoli qui si scaldano senza toccare il loro CSS */
  --c-bg:hsl(30 12% 6%);
  --c-sidebar:hsl(30 10% 11%);
  --c-border:hsl(30 9% 17%);
  --c-track:hsl(30 8% 26%);
  --c-muted:hsl(34 7% 52%);
  --c-sec:hsl(35 9% 66%);
  --c-primary:hsl(38 16% 90%);
  --c-white:hsl(40 33% 97.5%);
  /* il fondo del canvas per gli sketch che lo leggono (Dithering): in esadecimale
     perche' p5 non capisce hsl() con gli spazi. E' --c-bg. */
  --stage:#110f0d;
  --ombra:#000;                 /* fili e veli: nel sito sono l'inchiostro */
  --ease-out:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
  accent-color:var(--accent);   /* checkbox, radio e progress del sistema */
}
/* La carta del sito (DESIGN.md, Neutral). I nomi restano quelli dello scuro:
   --c-white e' "il piu' forte", che sulla carta e' l'inchiostro. */
:root[data-tema=chiaro]{
  --on-accent:#fff;             /* il bianco puro solo sull'accento, come nel sito */
  --c-bg:hsl(38 16% 90.5%);
  --c-sidebar:hsl(40 33% 97.5%);
  --c-border:hsl(38 14% 87%);
  --c-track:hsl(38 12% 83%);
  --c-muted:hsl(35 8% 52%);
  --c-sec:hsl(32 9% 36%);
  --c-primary:hsl(30 12% 12%);
  --c-white:hsl(30 12% 12%);
  --stage:#ebe8e3;
  --ombra:hsl(30 12% 12%);
  color-scheme:light;
}

body{font-family:Archivo,-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  background:var(--c-bg);-webkit-font-smoothing:antialiased}
/* chi aveva fissato Helvetica o Inter sui controlli eredita l'Archivo */
button,input,select,textarea{font-family:inherit}

::selection{background:color-mix(in oklab, var(--accent), transparent 55%);color:var(--c-white)}

/* il fuoco da tastiera: un anello nell'accento, non il bordo blu del sistema */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* i cursori: binario caldo, pallino chiaro che diventa accento quando lo prendi */
/* il binario si colora sull'input e non su ::-webkit-slider-runnable-track:
   gli strumenti lo disegnano alto 2px sull'input, e colorare la pista interna
   lo faceva diventare una barra alta quanto il campo */
input[type=range]{accent-color:var(--accent);background:var(--c-track)}
input[type=range]::-webkit-slider-thumb{background:var(--c-white)}
input[type=range]:active::-webkit-slider-thumb{background:var(--accent)}
input[type=range]::-moz-range-thumb{background:var(--c-white)}
input[type=range]:active::-moz-range-thumb{background:var(--accent)}

/* barre di scorrimento sottili, senza binario: si vede solo il cursore */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-track);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--c-muted)}

/* .brand-accent: per il bottone principale di uno strumento (Export, Download),
   da aggiungere a mano dove serve. Uno per strumento, non di piu'. */
.brand-accent{background:var(--accent) !important;color:var(--on-accent) !important;border-color:transparent !important}
.brand-accent:hover{filter:brightness(1.08)}

/* La cartellina del portfolio (.casa in base.css) davanti al nome dello
   strumento, messa da brand.js su ogni data-brand-back. Il nome prende carattere
   e colore dal titolo che la contiene; la cartellina si vede appena e al
   passaggio si alza, come nel sito. */
.brand-back{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.brand-back svg{display:block;width:13px;height:auto;aspect-ratio:200/160;opacity:.35;flex-shrink:0;
  transition:opacity 160ms ease-in-out,translate .25s cubic-bezier(.3,1.5,.5,1)}
.brand-back path,.brand-back rect{fill:currentColor}
.brand-back:hover svg{opacity:.6;translate:0 -2px}
@media (prefers-reduced-motion:reduce){ .brand-back svg{transition:opacity 160ms} }

/* .brand-pannello: le barre laterali staccate dal bordo, come un pannello
   appoggiato sopra il fondo (DESIGN.md, la Regola del Filo e del Velo).
   Va sul pannello stesso, uno o due per strumento. Solo da 768px: sotto e'
   il cassetto del telefono, che occupa tutto lo schermo. */
@media (min-width:768px){
  .brand-pannello{margin:12px;height:calc(100% - 24px) !important;border-radius:16px;
    border:0 !important;background:var(--c-sidebar);
    box-shadow:0 0 0 1px color-mix(in oklab,var(--ombra),transparent 92%),
               0 1px 2px color-mix(in oklab,var(--ombra),transparent 95%),
               0 12px 32px -12px color-mix(in oklab,var(--ombra),transparent 85%)}
}
/* la barra di scorrimento del pannello resta dentro gli angoli tondi.
   Chrome usa le regole ::-webkit-scrollbar solo se scrollbar-width e
   scrollbar-color sono "auto": alcuni strumenti li fissano, qui si rimettono. */
@supports selector(::-webkit-scrollbar){
  .brand-pannello{scrollbar-width:auto !important;scrollbar-color:auto !important}
}
.brand-pannello::-webkit-scrollbar{width:6px}
.brand-pannello::-webkit-scrollbar-track{background:transparent;margin-block:16px}
.brand-pannello::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
.brand-pannello:hover::-webkit-scrollbar-thumb{background:var(--c-track)}   /* compare solo passandoci sopra */
/* dentro il pannello niente fili fra le sezioni: le separa gia' lo spazio */
.brand-pannello details,.brand-pannello > div{border-color:transparent !important}

/* La schermata del telefono (brand.js): copre lo strumento sotto i 768px.
   Arancione pieno, cartella e testo in bianco: e' l'unico posto dove il
   sito usa il bianco puro, sull'accento. */
.brand-solo-desktop{display:none}
@media (max-width:767px){
  .brand-solo-desktop{position:fixed;inset:0;z-index:2147483647;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:16px;padding:28px;text-align:center;
    background:var(--accent);color:#fff;text-decoration:none;font-family:Archivo,-apple-system,sans-serif}
  .brand-solo-desktop > svg{width:64px;height:auto;aspect-ratio:200/160;fill:#fff;margin-bottom:8px}
  .brand-solo-desktop strong{font-size:34px;line-height:1.1;font-weight:500;letter-spacing:-.02em;max-width:12ch}
  .brand-solo-desktop span{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;opacity:.85}
  .brand-solo-desktop span svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
  body{overflow:hidden}
}