/* ============================================================
   PAINT IT BLACK - DESIGN TOKENS
   Design system PIB v2.4
   Da importare per primo, prima di ogni altro CSS.
   Nessun valore cromatico o tipografico va scritto altrove.
   ============================================================ */

:root {

  /* --- COLORI: base ------------------------------------- */
  --pib-black:            #000000;   /* fondo dominante */
  --pib-bg-raised:        #0E0E0E;   /* sezioni alternate */
  --pib-border:           #2A2A2A;   /* hairline 1px */

  /* --- COLORI: oro -------------------------------------- */
  /* L'oro e' sistema di accento, non colore del marchio.
     Il logo resta monocromo, mai ricolorato in oro. */
  --pib-accent:           #F0D283;   /* Golden Harvest, accento primario */
  --pib-accent-strong:    #DAA900;   /* Golden Sunlight Haze, hover/press */
  --pib-accent-tint:      #F1E4B2;   /* Golden Sunlight's Embrace, tint chiaro */

  /* --- COLORI: testo ------------------------------------ */
  --pib-fg1:              #FAFAFA;   /* testo primario su nero */
  --pib-fg2:              #B4B4B4;   /* testo secondario */
  --pib-fg-muted:         #5C5C5C;   /* caption, legal, decorativo */

  /* ATTENZIONE ACCESSIBILITA'
     --pib-fg-muted su nero ha un rapporto di contrasto di circa 3.4:1.
     Sotto la soglia WCAG AA di 4.5:1 per il testo normale.
     Ammesso solo per testo di dimensione >= 24px o >= 19px bold,
     dove la soglia scende a 3:1.
     Per caption e testo legale a 11-12px usare --pib-fg-muted-aa. */
  --pib-fg-muted-aa:      #8A8A8A;   /* circa 5.3:1 su nero, conforme AA */

  /* --- COLORI: overlay ---------------------------------- */
  --pib-overlay-hero:     rgba(0, 0, 0, .72);
  --pib-media-opacity:    .4;         /* opacita' di video e immagini sotto hero */

  /* --- TIPOGRAFIA: famiglia ----------------------------- */
  --pib-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pib-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- TIPOGRAFIA: scala -------------------------------- */
  /* H1 hero */
  --pib-h1-size:          60px;
  --pib-h1-size-mobile:   34px;
  --pib-h1-weight:        900;
  --pib-h1-lh:            1.05;
  --pib-h1-ls:            .02em;

  /* H2 sezione */
  --pib-h2-size:          34px;
  --pib-h2-size-cta:      36px;
  --pib-h2-weight:        700;
  --pib-h2-lh:            1.2;
  --pib-h2-ls:            .02em;

  /* H3 */
  --pib-h3-size:          20px;
  --pib-h3-size-sm:       19px;
  --pib-h3-weight:        700;
  --pib-h3-lh:            1.25;

  /* Body */
  --pib-body-size:        16px;
  --pib-body-size-lg:     18px;   /* hero e paragrafi di apertura */
  --pib-body-size-md:     17px;   /* sottotitoli di sezione */
  --pib-body-size-sm:     15px;   /* testo card */
  --pib-body-size-xs:     14px;   /* testo card compatte, footer */
  --pib-body-lh:          1.7;
  --pib-body-lh-loose:    1.8;    /* blocchi di testo lungo */

  /* Eyebrow e label */
  --pib-eyebrow-size:     11.5px;
  --pib-eyebrow-size-sm:  11px;
  --pib-eyebrow-weight:   500;
  --pib-eyebrow-ls:       .13em;
  --pib-eyebrow-ls-wide:  .22em;   /* eyebrow hero */
  --pib-eyebrow-ls-mid:   .18em;

  /* Caption e legale */
  --pib-caption-size:     12px;
  --pib-caption-ls:       .06em;

  /* Bottoni e link uppercase */
  --pib-btn-size:         13px;
  --pib-btn-size-sm:      12px;
  --pib-btn-weight:       700;
  --pib-btn-ls:           .07em;
  --pib-nav-size:         12.5px;

  /* --- SPAZIATURA --------------------------------------- */
  /* Scala 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 */
  --pib-space-1:          4px;
  --pib-space-2:          8px;
  --pib-space-3:          16px;
  --pib-space-4:          24px;
  --pib-space-5:          32px;
  --pib-space-6:          48px;
  --pib-space-7:          64px;
  --pib-space-8:          96px;

  /* --- LAYOUT ------------------------------------------- */
  --pib-maxw:             1240px;   /* contenitore standard */
  --pib-maxw-text:        820px;    /* blocchi centrati CTA */
  --pib-maxw-narrow:      720px;    /* intestazioni di sezione */
  --pib-maxw-prose:       640px;    /* paragrafi lunghi */
  --pib-pad-x:            40px;
  --pib-pad-x-mobile:     22px;
  --pib-header-h:         76px;

  /* Padding verticale sezioni */
  --pib-sec-y:            104px;
  --pib-sec-y-cta:        120px;
  --pib-sec-y-mobile:     60px;

  /* Hero pagine interne (non full-bleed) */
  --pib-hero-pt:          160px;
  --pib-hero-pb:          96px;
  --pib-hero-pt-mobile:   108px;
  --pib-hero-pb-mobile:   60px;

  /* --- FORMA -------------------------------------------- */
  /* Il brand e' sharp. Niente card arrotondate. */
  --pib-radius:           2px;
  --pib-radius-none:      0;
  --pib-hairline:         1px;

  /* --- ELEVAZIONE --------------------------------------- */
  /* Su nero niente ombre morbide: hairline piu' glow oro. */
  --pib-glow:             0 0 0 1px var(--pib-border);
  --pib-glow-accent:      0 0 0 1px var(--pib-accent);

  /* --- MOVIMENTO ---------------------------------------- */
  /* Fade brevi. Niente bounce, spring, parallax. */
  --pib-dur-fast:         150ms;
  --pib-dur:              200ms;
  --pib-dur-slow:         250ms;
  --pib-ease:             ease-out;
  --pib-transition:       var(--pib-dur) var(--pib-ease);

  /* --- FOCUS -------------------------------------------- */
  --pib-focus-w:          2px;
  --pib-focus-offset:     3px;
  --pib-focus-color:      var(--pib-accent);

  /* --- Z-INDEX ------------------------------------------ */
  --pib-z-media:          0;
  --pib-z-overlay:        1;
  --pib-z-content:        2;
  --pib-z-header:         50;
  --pib-z-menu:           100;
  --pib-z-cookie:         200;
}

/* --- BREAKPOINT -----------------------------------------
   Le custom property non funzionano nelle media query.
   Valori di riferimento, da tenere allineati a mano:
     900px  griglie asimmetriche e 4 colonne -> 2 colonne
     680px  mobile, colonna singola, hero ridotta
   -------------------------------------------------------- */

@media (max-width: 680px) {
  :root {
    --pib-h1-size:   var(--pib-h1-size-mobile);
    --pib-sec-y:     var(--pib-sec-y-mobile);
    --pib-sec-y-cta: var(--pib-sec-y-mobile);
    --pib-hero-pt:   var(--pib-hero-pt-mobile);
    --pib-hero-pb:   var(--pib-hero-pb-mobile);
    --pib-pad-x:     var(--pib-pad-x-mobile);
  }
}

/* --- MOVIMENTO RIDOTTO ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pib-dur-fast: 0ms;
    --pib-dur:      0ms;
    --pib-dur-slow: 0ms;
  }
}

/* ============================================================
   FONT
   Montserrat variable, self-hosted.
   Nessun caricamento da CDN Google: rallenta il first paint
   e trasmette l'IP dell'utente prima del consenso cookie.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-variable.woff2') format('woff2-variations');
  font-weight: 400 900;
  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;
}