/* =========================================================
   DESIGN TOKENS — Portfolio Matteo Iafrate
   Fonte: tavole Figma (Palette / Stili / Typography)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap');

:root {
  /* ---------- 1.0 Colori — Bluescale ---------- */
  --color-blue: #008FF0;
  --color-blue-2: #007BCE;

  /* ---------- 2.0 Colori — Greyscale ---------- */
  --color-black: #000000;
  --color-black-2: rgba(0, 0, 0, 0.8);
  --color-grey-3: #333333; /* Navbar background (assets/navbar.png) */
  --color-grey-3-rgb: 51, 51, 51; /* same color, as r,g,b for rgba() glass backgrounds */
  --color-grey-2: #909090;
  --color-grey: #EFEFEF;
  --color-white: #FFFFFF;

  /* ---------- 3.0 Ombre ---------- */
  --shadow-card: 0 0 40px rgba(0, 0, 0, 0.10);

  /* ---------- 4.0 Card / Stili ----------
     Valori mobile (< 600px, qui sotto): raggio e bordo bianco piu'
     piccoli, riscontro diretto ("i radius su mobile sono un po' troppo
     esagerati" / "questi bordi bianchi siano leggermente piu' sottili
     (soltanto su mobile)"). Da 600px in su restano i valori storici. */
  --stroke-card-width: 4px;
  --stroke-card-color: var(--color-white);
  --radius-card: 20px;
  --sketch-stroke-width: 8px;
  --sketch-stroke-color: var(--color-blue);

  /* ---------- 5.0 Spacing scale (multipli di 4) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- 6.0 Tipografia — famiglia e pesi ---------- */
  --font-family-base: "Plus Jakarta Sans", sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* ---------- 6.1 Tipografia — dimensioni (Desktop XL, default) ---------- */
  --font-size-title1: 60px;
  --font-size-h1: 48px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 26px;
  --font-size-h5: 22px;
  --font-size-body: 16px;
  --font-size-body-small: 14px;
  --font-size-caption: 12px;

  --line-height-base: normal; /* Figma: "auto" su tutti i livelli */
}

/* =========================================================
   7.0 Layout — Griglia responsive
   Stessi breakpoint già in uso per thumb (card.html), navbar e
   project-card — S/M/L/XL/XXL. Ogni componente che deve allinearsi al
   resto del sito usa questi valori invece di inventarne di propri.

   Mappatura assets/Form/*.png sui tier (per come i --container sotto
   sono stati misurati): M.png→S, Tablet.png→M, L.png→L, XL.png→XL.
   XXL non ha reference, valore stimato (vedi nota sotto).

   NB: le custom property non sono leggibili dentro @media (limite CSS),
   quindi i breakpoint sotto sono anche il riferimento per scrivere a mano
   i valori px nelle @media di ogni componente — vanno tenuti sincronizzati.
   ========================================================= */
:root {
  --bp-s: 320px;
  --bp-m: 600px;
  --bp-l: 900px;
  --bp-xl: 1280px;
  --bp-xxl: 1728px;

  /* Valori del tier S (default) — ogni componente scrive semplicemente
     padding: var(--grid-margin) / max-width: var(--container) UNA volta
     sola: cambiano da soli al breakpoint giusto tramite le riassegnazioni
     qui sotto, senza che il componente debba ripetere le proprie @media. */
  --grid-columns: 4;
  --grid-gutter: 16px;
  --grid-margin: 16px;
  --container: 100%;
}

@media (min-width: 600px) {
  :root {
    --grid-columns: 8;
    --grid-gutter: 24px;
    --grid-margin: 24px;
    /* misurato da assets/Form/Tablet.png */
    --container: 760px;
    /* Valori storici di card/stroke, invariati da qui in su: la
       riduzione (vedi sopra) riguarda solo il tier mobile. */
    --stroke-card-width: 6px;
    --radius-card: 30px;
  }
}

@media (min-width: 900px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 24px;
    --grid-margin: 32px;
    /* misurato da assets/Form/L.png (uguale a Tablet.png, invariato) */
    --container: 760px;
  }
}

@media (min-width: 1280px) {
  :root {
    --grid-gutter: 32px;
    --grid-margin: 48px;
    /* misurato da assets/Form/XL.png */
    --container: 1088px;
  }
}

/* ---------- XXL: da qui in poi il sito NON si ferma, si INGRANDISCE ----------

   A 1728 i numeri sono misurati, non stimati: sia assets/Form/XL.png sia
   assets/pagine/XL.png hanno canvas 1728px — esattamente la soglia XXL — e
   in entrambe il box del contenuto misura 1088px centrati (x 319..1407),
   con 64px di margine di griglia. Quella tavola resta la verità, e a
   1728px esatti questi valori la riproducono al pixel.

   Cosa cambia è cosa succede SOPRA i 1728, dove reference non ce n'è.
   Prima la colonna restava inchiodata a 1088 e a crescere erano solo i
   vuoti laterali: su uno schermo grande il sito si rimpiccioliva da solo.
   Riscontro del committente, su una TV da 32 pollici: «le thumb mi sembrano
   leggermente troppo strette, credo che possiamo allargare tutto nella
   versione xxl».

   Quindi sopra i 1728 la colonna cresce — ma A META' PASSO e con un tetto,
   non in proporzione piena. Le due cose hanno una ragione ciascuna.

   A META' PASSO perché tenere il rapporto esatto della tavola (62.96vw) è
   risultato troppo: «forse ora hai esagerato un pochino, leggermente meno».
   Metà dell'allargamento della finestra va alla colonna, metà resta ai
   margini.

   COL TETTO perché non tutto nella pagina cresce. I corpi del testo, la
   navbar, il padding interno del form sono misure fisse: oltre un certo
   punto una colonna che continua a gonfiarsi si stacca da loro e la
   pagina si legge sproporzionata invece che grande. 1280px è il punto in
   cui ci si ferma, +18% sulla tavola, e si raggiunge intorno a una
   finestra da 2130px. È un giudizio, non una misura: è il numero da
   cambiare se un domani lo si vuole diverso.

   C'è anche un motivo che non riguarda l'estetica. Il fondale di "Get in
   touch" (js/presence/fondali.js) è tarato sul mockup a canvas 1728 e
   si scala con la finestra: se la colonna resta del tutto ferma mentre il
   disegno cresce, i due si scollano e parte dell'inchiostro che nel mockup
   stava NASCOSTO dietro la card sbuca ai suoi lati.

   CHI CRESCE CON LEI. La colonna non si allarga da sola: la thumb dei
   lavori (css/card.css) e il mazzo del Resumè (css/my-jurney.css) sono
   agganciati a --container con la proporzione misurata sulla tavola, così
   restano fra loro nel rapporto in cui sono disegnati. Era il rischio
   segnalato dal committente — «altrimenti bisogna modificare le dimensioni
   anche delle thumb del resumè, altrimenti è tutto sproporzionato» — e
   agganciarle è il modo di non doverci più pensare: si tocca un numero
   solo, qui.

   I margini di griglia restano fissi a 64px: sono lo spazio che AVANZA, e
   sopra i 1728 ce n'è già in abbondanza.

   Sotto i 1728 non cambia niente: lì le tavole ci sono, e comandano loro. */
@media (min-width: 1728px) {
  :root {
    --grid-margin: 64px;
    --container: min(calc(1088px + (100vw - 1728px) * 0.5), 1280px);
  }
}

/* =========================================================
   Override tipografia — Mobile
   Breakpoint indicativo, allinealo a quello reale del sito
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --font-size-title1: 36px;
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-body: 16px;
    --font-size-body-small: 14px;
    --font-size-caption: 12px;
  }
}

/* =========================================================
   Classi di utilità tipografiche
   Uso: <h1 class="text-h1">...</h1>
   ========================================================= */
.text-title1 { font: var(--font-weight-bold) var(--font-size-title1)/var(--line-height-base) var(--font-family-base); }
.text-h1     { font: var(--font-weight-bold) var(--font-size-h1)/var(--line-height-base) var(--font-family-base); }
.text-h2     { font: var(--font-weight-bold) var(--font-size-h2)/var(--line-height-base) var(--font-family-base); }
.text-h3     { font: var(--font-weight-bold) var(--font-size-h3)/var(--line-height-base) var(--font-family-base); }
.text-h4     { font: var(--font-weight-bold) var(--font-size-h4)/var(--line-height-base) var(--font-family-base); }
.text-h5     { font: var(--font-weight-bold) var(--font-size-h5)/var(--line-height-base) var(--font-family-base); }
.text-body   { font: var(--font-weight-regular) var(--font-size-body)/var(--line-height-base) var(--font-family-base); }
.text-body-small { font: var(--font-weight-regular) var(--font-size-body-small)/var(--line-height-base) var(--font-family-base); }
.text-caption { font: var(--font-weight-regular) var(--font-size-caption)/var(--line-height-base) var(--font-family-base); }

/* =========================================================
   Componenti base — Card (dagli Stili)
   ========================================================= */
.card-stroke {
  border: var(--stroke-card-width) solid var(--stroke-card-color);
  box-shadow: var(--shadow-card);
}

.card-rounded {
  border-radius: var(--radius-card);
}