/* ─────────────────────────────────────────────────────────────────────
   QCloak — fondamenta condivise delle pagine di qcloak.it
   (/guida/, /code/, /privacy.html, /terms.html e le versioni in /en/)

   Qui stanno SOLO le cose che devono essere identiche ovunque: i
   colori e le regole di base (i font in /assets/fonts/fonts.css).
   Il resto — layout, componenti — resta nella pagina, perché cambia
   da pagina a pagina.

   Prima questo blocco era copiato dentro ogni file: la nota diceva «se
   cambi un colore qui, cambialo anche là», che è il modo educato di
   dire che prima o poi divergeranno.

   I percorsi sono assoluti dalla radice del sito (/assets/...), quindi
   le pagine vanno servite da un server, non aperte come file locali.
   ───────────────────────────────────────────────────────────────── */

/* ── Font ──────────────────────────────────────────────────────────
   I @font-face stanno in /assets/fonts/fonts.css, che le pagine
   collegano PRIMA di questo file. Un file solo per tutto il sito:
   lo usano anche le pagine principali (index, en/index), che non
   usano site.css. Lo riscrive scripts/fetch_webfonts.sh.
   ───────────────────────────────────────────────────────────────── */

/* ── Colori ──────────────────────────────────────────────────────────
   Chiaro come base, scuro in due blocchi: la media query (che rispetta
   data-theme="light" se un giorno ci sarà un interruttore) e
   data-theme="dark" esplicito.
   ───────────────────────────────────────────────────────────────── */
:root {
  --paper:        #FBFAF8;
  --paper-sunk:   #F1EFEC;
  --paper-raised: #FFFFFF;
  --ink:          #12171B;
  --slate:        #5A646C;
  --slate-faint:  #8A939A;
  --rule:         #DFDCD7;
  --rule-strong:  #C7C2BB;

  --ember:        #A34401;
  --ember-tint:   #F7ECE2;
  --ember-edge:   #E0C4AB;

  /* Il pillar è un blocco che inverte rispetto alla pagina. Ha i suoi
     token perché il testo smorzato e il filetto devono seguire IL SUO
     fondo, non quello della pagina — altrimenti è il classico grigio
     chiaro su chiaro. */
  --pillar-bg:     #12171B;
  --pillar-fg:     #FBFAF8;
  --pillar-dim:    #C3C8CC;
  --pillar-accent: #E3800F;
  --pillar-rule:   #333C43;

  --verde:        #2F7D4F;
  --verde-tint:   #EAF3ED;
  /* Verde più scuro per testo piccolo sulla propria tinta: --verde su
     --verde-tint sta a 4,45:1, appena sotto il minimo WCAG AA. */
  --verde-ink:    #1F6B41;
  --rosso:        #B4342A;
  --rosso-tint:   #FAECEA;
  --rosso-edge:   #E7C4BF;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Larghezza di lettura. Quella piena (--wide) la decide la pagina:
     la guida sta stretta, la landing si allarga. */
  --measure: 34rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0E1215;
    --paper-sunk:   #151A1E;
    --paper-raised: #191F24;
    --ink:          #E9E6E1;
    --slate:        #9BA4AB;
    --slate-faint:  #6E777E;
    --rule:         #262D33;
    --rule-strong:  #39424A;

    --ember:        #E3800F;
    --ember-tint:   #221812;
    --ember-edge:   #4A331B;

    --pillar-bg:     #E9E6E1;
    --pillar-fg:     #12171B;
    --pillar-dim:    #4A545C;
    --pillar-accent: #A34401;
    --pillar-rule:   #CBC7C1;

    --verde:        #58B37C;
    --verde-tint:   #13211A;
    --verde-ink:    #8FD8AC;
    --rosso:        #E8695C;
    --rosso-tint:   #241512;
    --rosso-edge:   #4C2622;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #0E1215;
  --paper-sunk:   #151A1E;
  --paper-raised: #191F24;
  --ink:          #E9E6E1;
  --slate:        #9BA4AB;
  --slate-faint:  #6E777E;
  --rule:         #262D33;
  --rule-strong:  #39424A;

  --ember:        #E3800F;
  --ember-tint:   #221812;
  --ember-edge:   #4A331B;

  --pillar-bg:     #E9E6E1;
  --pillar-fg:     #12171B;
  --pillar-dim:    #4A545C;
  --pillar-accent: #A34401;
  --pillar-rule:   #CBC7C1;

  --verde:        #58B37C;
  --verde-tint:   #13211A;
  --verde-ink:    #8FD8AC;
  --rosso:        #E8695C;
  --rosso-tint:   #241512;
  --rosso-edge:   #4C2622;

  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────────────────
   color-scheme (sopra, per tema) e il margine del body stanno solo
   qui: una pagina che li ripete nel proprio <style> viene dopo questo
   file e vincerebbe sulle regole per tema.
   ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ember); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}