/*
 * Gentlebrand — fondamenti del design system.
 * Fonte: Figma Make "Gentlebrand - Layout" (K7KEjAlNfU6r8ICk2X0Skj) + Figma "Gentlebrand-UI".
 * Il prodotto finale importa questo file così com'è: nessun valore visivo fuori da qui.
 *
 * FONT
 *   Plus Jakarta Sans — Google Fonts (https://fonts.google.com/specimen/Plus+Jakarta+Sans),
 *   licenza SIL Open Font License 1.1. Pesi usati: 300, 400, 500, 600, 700.
 *   Caricato una sola volta da fonts.googleapis.com nell'<head> di ogni pagina.
 *   Una sola famiglia per titoli e testo: la gerarchia la fanno peso e dimensione.
 */

:root {
  /* — Tipografia: famiglie e pesi — */
  --font-titoli: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-testo: var(--font-titoli);
  --peso-light: 300;
  --peso-regular: 400;
  --peso-medium: 500;
  --peso-semibold: 600;
  --peso-bold: 700;

  /* — Scala tipografica (fluida dove il Make usa clamp) — */
  --testo-micro: 10px;            /* etichette meta, kicker */
  --testo-eyebrow: 12px;          /* eyebrow maiuscolo */
  --testo-piccolo: 13px;          /* footer, filtri */
  --testo-ui: 15px;               /* navigazione */
  --testo-base: 16px;             /* bottoni, corpo breve */
  --testo-corpo: 17px;            /* paragrafi */
  --testo-lead: 20px;             /* paragrafi d'apertura */
  --testo-h4: 21px;               /* titoli card piccole */
  --testo-h3: 26px;               /* titoli card */
  --testo-h2: clamp(40px, 4.2vw, 76px);          /* titoli capitolo */
  --testo-sezione: clamp(44px, 3.34vw, 64px);    /* titoli di sezione home */
  --testo-display: clamp(58px, 5vw, 96px);       /* hero home */
  --testo-display-xl: clamp(76px, 9.4vw, 180px); /* hero work / progetto */

  --interlinea-stretta: 0.9;
  --interlinea-titoli: 1.05;
  --interlinea-media: 1.2;
  --interlinea-corpo: 1.65;

  --spaziatura-lettere-display: -0.055em;
  --spaziatura-lettere-titoli: -0.03em;
  --spaziatura-lettere-maiuscolo: 0.1em;

  /* — Colori: ruoli — */
  --colore-sfondo: #ffffff;
  --colore-sfondo-header: #fffffff2;          /* bianco 95% con blur */
  --colore-sfondo-scuro: #0d0f0e;             /* footer, sezioni scure */
  --colore-sfondo-overlay: #090a09f2;         /* modale video */
  --colore-superficie-neutra: #efefeb;        /* scheletri di caricamento, vetrina componenti */
  --colore-superficie-hover: #f1f1ed;

  --colore-testo: #121414;
  --colore-testo-secondario: #616363;
  --colore-testo-attenuato: #12141499;        /* eyebrow, meta */
  --colore-testo-disabilitato: #929494;
  --colore-testo-su-scuro: #ffffff;
  --colore-testo-su-scuro-secondario: #bebebe;
  --colore-testo-su-scuro-attenuato: #696969;

  --colore-primario: #121414;                 /* bottoni pieni, stato attivo */
  --colore-su-primario: #ffffff;

  --colore-bordo: #12141433;
  --colore-bordo-tenue: #12141422;
  --colore-bordo-controllo: #1214142e;        /* bottoni filtro, pill outline */
  --colore-bordo-su-scuro: #696969;

  /* Accenti di brand: ognuno lega un colore a una disciplina */
  --colore-accento-strategia: #fccf00;
  --colore-accento-identita: #deaaff;
  --colore-accento-packaging: #aed9e0;
  --colore-accento-approccio: #dce2d4;

  /* Segnaposto immagine mentre carica (stato "caricamento" delle card) */
  --colore-segnaposto-1: #e4b4a6;
  --colore-segnaposto-2: #aed9e0;
  --colore-segnaposto-3: #dce2d4;
  --colore-segnaposto-4: #deaaff;
  --colore-segnaposto-5: #fccf00;
  --colore-segnaposto-6: #b8d1cc;

  --colore-pericolo: #b42318;
  --colore-pericolo-sfondo: #fef3f2;
  --colore-successo: #2f6b3a;
  --colore-successo-sfondo: #ecf5ee;
  --colore-focus: #2f5bea;

  /* — Spaziature — */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 24px;
  --spazio-6: 32px;
  --spazio-7: 44px;
  --spazio-8: 60px;
  --spazio-9: 80px;
  --spazio-10: 110px;
  --spazio-11: 145px;
  --margine-pagina: 5.4%;                     /* gutter laterale desktop */
  --margine-pagina-mobile: 6%;
  --gap-griglia: 18px;

  /* — Raggi — */
  --raggio-piccolo: 14px;
  --raggio-medio: 20px;
  --raggio-grande: 22px;
  --raggio-xl: 28px;
  --raggio-pill: 999px;

  /* — Ombre — */
  --ombra-hover: 0 12px 26px #00000022;
  --ombra-card-hover: 0 22px 44px #00000024;
  --ombra-media: 0 30px 70px #1214141a;
  --ombra-modale: 0 30px 90px #00000088;

  /* — Movimento — */
  --easing: cubic-bezier(.22, 1, .36, 1);
  --durata-rapida: .25s;
  --durata-base: .35s;
  --durata-media: .55s;
  --durata-lenta: .9s;
  --durata-reveal: .9s;

  /* — Layout — */
  --altezza-header: 145px;
  --altezza-header-compatto: 78px;
  --altezza-header-mobile: 92px;
  --altezza-header-mobile-compatto: 64px;
  --larghezza-logo: 186px;
}