/* ==========================================================================
   PrintLitoArt — Token del design system "Il foglio e l'inchiostro"
   Fonte: 08-Mockup-Claude-Design/guida.md §5–§10 e mockup "Design system tre pagine".
   NON cambiare i valori senza aggiornare anche DESIGN.md e Elementor > Site Settings.
   ========================================================================== */

/* ---------- Font self-hosted (OFL 1.1, sottoinsieme latin) ---------- */
@font-face { font-family: 'Libre Bodoni'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/libre-bodoni-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Bodoni'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/libre-bodoni-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Libre Bodoni'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/libre-bodoni-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Libre Bodoni'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/libre-bodoni-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/jost-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jost-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jost-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/jost-latin-600-normal.woff2') format('woff2'); }

:root {
  /* ---------- Colori: neutri (90% della superficie) ---------- */
  --pla-inchiostro:   #0F0F12;  /* testo principale, sezioni scure */
  --pla-grafite:      #26262B;  /* superfici scure secondarie, hover CTA */
  --pla-carta:        #F7F3EC;  /* sfondo principale */
  --pla-carta-calda:  #EDE7DB;  /* sezioni alternate, passe-partout */
  --pla-bianco-museo: #FDFBF7;  /* card, form, parete delle opere */
  --pla-filo:         #D9D2C4;  /* SOLO filetti decorativi 1px (contrasto 1,36:1) */
  --pla-seppia:       #5E5A52;  /* testo secondario su carta, bordi dei campi */
  --pla-nebbia:       #B8B2A6;  /* testo secondario su inchiostro */

  /* ---------- Colori: accenti di stampa (≤ 5%, micro-dosi) ---------- */
  --pla-ciano-stampa:   #009FE3; /* decorazione; link e focus SOLO su fondo scuro */
  --pla-ciano-testo:    #0071A8; /* link e focus su fondo chiaro (4,83:1) */
  --pla-magenta-stampa: #E6007E; /* solo decorazione, mai testo su carta */
  --pla-giallo-stampa:  #FFD400; /* solo decorazione */
  --pla-oro-lamina:     #C9A45C; /* solo pagina Lavorazioni speciali, su inchiostro */
  --pla-oro-su-carta:   #7A5C1E; /* variante oro leggibile su carta */
  --pla-errore:         #9E2B25;
  --pla-ok:             #1F6B45;

  /* ---------- Tipografia ---------- */
  --pla-font-display: 'Libre Bodoni', 'Bodoni 72', Didot, Georgia, serif;
  --pla-font-text:    'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --pla-fs-h1-hero:   clamp(2.75rem, 1.4rem + 5.2vw, 5.5rem);  /* max 88px, solo home */
  --pla-fs-h1:        clamp(2.25rem, 1.2rem + 3.4vw, 4rem);    /* max 64px, pagine interne */
  --pla-fs-h2:        clamp(1.75rem, 1.1rem + 2vw, 2.75rem);   /* max 44px */
  --pla-fs-manifesto: clamp(23px, 1rem + 1.5vw, 38px);         /* manifesto home, interlinea 1.42 */
  --pla-fs-hero-lead: clamp(17px, 1.2vw, 20px);                /* lead degli hero, interlinea 1.6 */
  --pla-fs-step:      clamp(1.5rem, 1.2rem + 1vw, 2rem);       /* titoli dei passi del form */
  --pla-fs-display-num: clamp(4rem, 3rem + 4vw, 7rem);         /* numeri grandi, interlinea 0.9 */
  --pla-fs-display-xl:  clamp(3rem, 2rem + 3vw, 5rem);         /* lettere indice A–Z, cifre Sequel */
  --pla-fs-display-xxl: clamp(6rem, 3rem + 12vw, 15rem);       /* cifra gigante decorativa (es. 12/50) */
  --pla-fs-h3:        1.5rem;     /* 24px, Bodoni 500 */
  --pla-fs-lead:      1.375rem;   /* 22px */
  --pla-fs-body:      1.125rem;   /* 18px */
  --pla-fs-small:     1rem;       /* 16px */
  --pla-fs-label:     0.8125rem;  /* 13px: etichette form, cartellino */
  --pla-fs-eyebrow:   0.75rem;    /* 12px */
  --pla-fs-button:    0.875rem;   /* 14px */

  --pla-lh-display: 1.02;
  --pla-lh-h1:      1.08;
  --pla-lh-h2:      1.15;
  --pla-lh-h3:      1.25;
  --pla-lh-body:    1.65;
  --pla-measure:    68ch;

  --pla-track-eyebrow: 0.18em;
  --pla-track-button:  0.12em;
  --pla-track-label:   0.06em;
  --pla-track-display: -0.02em;

  /* ---------- Layout e ritmo (valori misurati sul mockup a 1440 px) ---------- */
  --pla-content-max:  1176px;                    /* larghezza utile: 1320 - 2×72 */
  --pla-frame-max:    1320px;                    /* cornice esterna con i margini */
  --pla-gutter:       clamp(20px, 5vw, 72px);    /* margine laterale */
  --pla-grid-gap:     24px;                      /* 16px sotto i 640px */
  --pla-gap-lg:       clamp(40px, 6vw, 80px);
  --pla-gap-xl:       clamp(48px, 7vw, 112px);
  --pla-section:      clamp(80px, 9vw, 136px);   /* padding verticale standard */
  --pla-section-lg:   clamp(88px, 10vw, 144px);
  --pla-section-xl:   clamp(96px, 11vw, 160px);
  --pla-hero-top:     clamp(40px, 5vw, 64px);
  --pla-hero-bottom:  clamp(80px, 9vw, 128px);
  --pla-header-h:     72px;
  --pla-header-h-scrolled: 56px;

  /* ---------- Forme, ombre, movimento ---------- */
  --pla-radius:       2px;                       /* massimo: niente pillole */
  --pla-shadow-menu:  0 24px 48px rgba(15, 15, 18, 0.10);
  --pla-shadow-pop:   0 12px 32px rgba(15, 15, 18, 0.12);  /* banner cookie */
  --pla-cmy-line:     linear-gradient(90deg, #009FE3, #E6007E, #FFD400);
  --pla-ease:         cubic-bezier(.2, .7, .1, 1);
  --pla-dur-fast:     200ms;
  --pla-dur:          250ms;
  --pla-dur-cta:      350ms;
  --pla-dur-hero:     900ms;
  --pla-focus-ring:   2px solid var(--pla-ciano-testo);
  --pla-focus-offset: 3px;
}

@media (max-width: 639px) {
  :root { --pla-grid-gap: 16px; }
}