/* ============================================================
   TOKENS — colori, font, formattazione del testo
   Questo è il file da cambiare se vuoi un'altra palette o
   un'altra coppia di caratteri. Il resto del sito (layout.css,
   app.js) legge questi valori, non li ridefinisce mai.
   ============================================================ */

:root{
  /* ---- colore: nero-inchiostro e rosso sigillo ---- */
  --sumi:      #0a0a09;   /* fondo pagina */
  --sumi-2:    #121110;   /* pannelli: sidebar */
  --washi:     #E7E1D2;   /* testo chiaro, uso misurato */
  --washi-soft:rgba(231,225,210,.82); /* testo delle note progetto: più leggero del --mist, meno acceso del --washi pieno */
  --mist:      #8c8576;   /* testo secondario */
  --mist-dim:  #56524a;   /* testo terziario / etichette */
  --red:       #8a3226;   /* rosso sigillo, accento primario */
  --red-bright:#b8452f;   /* rosso hover / attivo */
  --red-dim:   rgba(138,50,38,0.45);
  --red-glow:      rgba(184,69,47,.45); /* bagliore rosso negli hover (linee sotto ai link, sigillo) */
  --red-glow-soft: rgba(184,69,47,.35);
  --line:      rgba(231,225,210,0.07);

  /* ---- oro ---- */
  --gold-dark:  #3c2f16;   /* accenno nel gradiente di sfondo */
  --gold-bright:#c49a55;   /* monogramma nel sigillo */
  --gold-deep:  #8a6a35;   /* stato selezionato: menu e titolo */

  /* ---- movimento ---- */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- misure strutturali condivise ---- */
  --sidebar-w: 240px;
}

/* ---- caratteri ---- */
/* Il collegamento a Google Fonts è nell'head di index.html.
   Qui definiamo solo come vengono usati. */
body{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:300;
  color:var(--washi);
}
.serif{
  font-family:'Zen Old Mincho', serif;
  font-weight:400;
}

/* ---- scala tipografica ---- */
.brand{ font-size:1.05rem; letter-spacing:.03em; }
.nav-label{ font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mist-dim); }
.nav-item{ font-size:.98rem; letter-spacing:.03em; color:var(--mist); }
.nav-secondary .nav-item{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-foot{ font-size:.62rem; letter-spacing:.1em; color:var(--mist-dim); }

.view-title{ font-size:clamp(2rem,4vw,2.9rem); letter-spacing:.01em; color:var(--gold-deep); }
.view-tag{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist-dim); }

.frame-num{ font-size:.68rem; color:rgba(231,225,210,.6); }

.contact-list a{ font-size:1.15rem; }

.lb-title{ font-size:1.15rem; letter-spacing:.08em; color:var(--red-bright); }
.lb-idx{ font-size:.8rem; letter-spacing:.1em; color:var(--mist); }

::selection{ background:var(--red); color:var(--washi); }