/* ==========================================================================
   OpenTenor · token del marchio · «Partitura aperta»
   --------------------------------------------------------------------------
   Carta chiara, un solo colore segnale (vermiglio, la matita rossa del
   revisore sulla partitura), una sfumatura morbida «alba» (pesca, rosa,
   lilla, cielo), le cinque linee del pentagramma che diventano linee di dati.
   Una sola fascia scura (inchiostro) per «Come funziona».

   Caratteri ospitati qui, nessun CDN (SIL OFL 1.1, licenze in /font/):
     Bricolage Grotesque (variabile, opsz 12–96, wght 200–800): titoli e testo
     Instrument Serif corsivo: una parola d'accento nei titoli, mai testo lungo
     DM Mono 400/500: etichette, codici (ISWC, IPI, CWR), numeri tabellari

   Contrasti WCAG 2.x misurati (testo / fondo):
     inchiostro   #111015 su carta 18.0 · su bianco 18.9
     inchiostro-2 #4A4853 su carta  8.5 · su bianco  9.0
     inchiostro-3 #66646F su carta  5.5 · su bianco  5.8 (didascalie, da 12 px)
     vermiglio-700 #C4370F (testo, link) su carta 5.1 · su bianco 5.4
     vermiglio-600 #E5431A solo parole d'accento da 24 px in su (3.9 su carta)
     vermiglio-500 #FF4F1F: grafica, fondi di bottone con testo inchiostro (5.8);
                   su inchiostro come testo 5.8
     ok #0B7A52 su bianco 5.4 · attesa #8A5A00 su bianco 5.9
     vermiglio-700 su carta-2 4.8 · inchiostro-3 su carta-2 5.2
     ok su ok-fondo 4.7 · attesa su attesa-fondo 5.3
     inchiostro su vermiglio-500 5.8 · su chip «prova» #FFE7A8 15.6
     Fascia scura: notte-testo #F4F1EA su inchiostro 16.8 (su notte-3 13.8)
                   notte-testo-2 #B9B5C0 su inchiostro 9.4 (su notte-2 8.7)
                   notte-testo-3 #9C98A4 su inchiostro 6.7 (su notte-3 5.5)
                   notte-ok #3FD69A 10.2 · notte-attesa #F2B544 10.3
   ========================================================================== */

/* ---------- Caratteri --------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/font/bricolage-grotesque-latin-opsz-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/font/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/font/dm-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/font/dm-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------- 1. Colori del marchio ------------------------------------ */
  --ot-vermiglio-50:  #FFF3EE;
  --ot-vermiglio-100: #FFE4D8;
  --ot-vermiglio-200: #FFC6AE;
  --ot-vermiglio-300: #FF9A73;
  --ot-vermiglio-500: #FF4F1F;   /* il segnale: marchio, grafica, bottone principale (testo inchiostro) */
  --ot-vermiglio-600: #E5431A;   /* parole d'accento nei titoli da 24 px in su */
  --ot-vermiglio-700: #C4370F;   /* testo e link su carta (5.1) */
  --ot-vermiglio-800: #A82E0B;   /* hover dei link */

  --ot-inchiostro:    #111015;   /* testo, bottone "Accedi", note, fascia scura */
  --ot-inchiostro-2:  #4A4853;   /* testo secondario */
  --ot-inchiostro-3:  #66646F;   /* didascalie, etichette (AA da 12 px) */
  --ot-inchiostro-4:  #9E9BA5;   /* solo decorativo */

  --ot-carta:         #FBF9F5;   /* fondo della pagina */
  --ot-carta-2:       #F4F1EA;   /* fasce alternate */
  --ot-bianco:        #FFFFFF;   /* schede */
  --ot-filetto:       #E7E2D9;   /* bordi, divisori */
  --ot-filetto-forte: #D6CFC3;

  /* Fascia scura (una sola sulla pagina) */
  --ot-notte:          #111015;
  --ot-notte-2:        #1A1920;  /* pannelli sulla fascia scura */
  --ot-notte-3:        #24232B;  /* corsie */
  --ot-notte-filetto:  rgb(244 241 234 / 0.12);
  --ot-notte-testo:    #F4F1EA;
  --ot-notte-testo-2:  #B9B5C0;
  --ot-notte-testo-3:  #9C98A4;
  --ot-notte-ok:       #3FD69A;
  --ot-notte-attesa:   #F2B544;

  /* Righe del pentagramma (sempre 5) */
  --ot-rigo-colore:   rgb(17 16 21 / 0.16);
  --ot-rigo-tenore:   var(--ot-vermiglio-500);

  /* Sfumatura «alba»: solo dietro le immagini */
  --ot-pesca:  #FFD3BD;
  --ot-rosa:   #FBD5E4;
  --ot-lilla:  #E3DCFF;
  --ot-cielo:  #D5E6FF;
  --ot-alba: radial-gradient(42% 52% at 72% 30%, rgb(255 199 170 / 0.85) 0%, rgb(255 199 170 / 0) 70%),
             radial-gradient(38% 46% at 92% 62%, rgb(227 220 255 / 0.95) 0%, rgb(227 220 255 / 0) 72%),
             radial-gradient(30% 36% at 52% 78%, rgb(251 213 228 / 0.7) 0%, rgb(251 213 228 / 0) 70%),
             radial-gradient(34% 40% at 98% 8%, rgb(213 230 255 / 0.9) 0%, rgb(213 230 255 / 0) 70%);
  --ot-alba-lineare: linear-gradient(100deg, var(--ot-pesca) 0%, var(--ot-rosa) 38%, var(--ot-lilla) 70%, var(--ot-cielo) 100%);

  /* Stati (testo su bianco/carta, tutti >= 4.5) */
  --ot-ok:           #0B7A52;
  --ot-ok-fondo:     #E2F4EC;
  --ot-attesa:       #8A5A00;
  --ot-attesa-fondo: #FFF1D6;
  --ot-prova:        #FFE7A8;   /* chip «Dati di prova» (testo inchiostro) */

  /* Grana: rumore SVG, da sovrapporre con opacità bassa */
  --ot-grana: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07  0 0 0 0 .06  0 0 0 0 .08  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* ---------- 2. Caratteri e scala ------------------------------------ */
  --ot-font-sans:  "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ot-font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ot-font-mono:  "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ot-fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.75rem);    /* 44 → 92 */
  --ot-fs-h2:      clamp(2rem, 1.3rem + 2.6vw, 3.5rem);         /* 32 → 56 */
  --ot-fs-h3:      clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);  /* 19 → 22 */
  --ot-fs-lead:    clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);/* 18 → 21 */
  --ot-fs-body:    1.0625rem;  /* 17 */
  --ot-fs-small:   0.9375rem;  /* 15 */
  --ot-fs-xs:      0.8125rem;  /* 13 */
  --ot-fs-label:   0.75rem;    /* 12, mono maiuscolo: il minimo sulla pagina */

  --ot-lh-display: 0.98;
  --ot-lh-title:   1.06;
  --ot-lh-body:    1.55;
  --ot-track-display: -0.03em;
  --ot-track-title:   -0.024em;
  --ot-track-label:   0.08em;

  --ot-w-regular: 400;
  --ot-w-medium:  500;
  --ot-w-semi:    600;
  --ot-w-bold:    700;
  --ot-w-display: 680;

  /* ---------- 3. Spazi (base 4) --------------------------------------- */
  --ot-s-1: 4px;
  --ot-s-2: 8px;
  --ot-s-3: 12px;
  --ot-s-4: 16px;
  --ot-s-5: 20px;
  --ot-s-6: 24px;
  --ot-s-7: 32px;
  --ot-s-8: 40px;
  --ot-s-9: 56px;
  --ot-s-10: 72px;
  --ot-s-11: 96px;
  --ot-gutter: clamp(16px, 4vw, 40px);
  --ot-max: 1280px;
  --ot-sezione: clamp(64px, 7.5vw, 112px);

  /* ---------- 4. Raggi ------------------------------------------------- */
  --ot-r-xs: 6px;
  --ot-r-sm: 10px;
  --ot-r-md: 14px;
  --ot-r-lg: 20px;
  --ot-r-xl: 28px;
  --ot-r-pill: 999px;

  /* ---------- 5. Ombre (calde, a strati) ------------------------------- */
  --ot-ombra-1: 0 1px 1px rgb(17 16 21 / 0.04), 0 1px 3px rgb(17 16 21 / 0.06);
  --ot-ombra-2: 0 1px 2px rgb(17 16 21 / 0.04), 0 6px 16px -4px rgb(52 28 18 / 0.10), 0 18px 40px -16px rgb(52 28 18 / 0.14);
  --ot-ombra-3: 0 1px 2px rgb(17 16 21 / 0.05), 0 12px 28px -8px rgb(52 28 18 / 0.14), 0 48px 96px -24px rgb(52 28 18 / 0.22);
  --ot-ombra-segnale: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 6px 18px -6px rgb(255 79 31 / 0.55);
  --ot-alone: 0 0 0 1px rgb(17 16 21 / 0.06);

  /* ---------- 6. Movimento -------------------------------------------- */
  --ot-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ot-dur-1: 160ms;
  --ot-dur-2: 320ms;

  /* ---------- 7. Fuoco ------------------------------------------------- */
  --ot-fuoco: 0 0 0 2px var(--ot-carta), 0 0 0 4px var(--ot-inchiostro);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ot-dur-1: 0ms;
    --ot-dur-2: 0ms;
  }
}