/* ==========================================================================
   Valori presi dal disegno Figma che NON sono variabili di design/tokens.css
   (ombre dei componenti, margini misurati sul disegno desktop).
   Ognuno ha accanto il nodo Figma da cui viene. Se cambiano nel disegno,
   si cambiano solo qui. I colori restano quelli di tokens.css.
   ========================================================================== */

:root {
  /* Larghezza massima del contenuto: su tablet (fino a 1279 px) la colonna resta
     larga come il frame Tablet 768 e si centra (decisione del 9 ottobre 2026,
     docs/PUNTI-APERTI.md B28); da 1280 px quella del desktop (1440) */
  --larghezza-contenuto: var(--larghezza-tablet);

  /* Margini laterali misurati nel disegno desktop 1440 (CLAUDE.md dice 64 px:
     il disegno usa 46 per header e hero, 72 per i testi delle sezioni 02, 08–10,
     56 per le sezioni 03–07; vale il disegno, vedi docs/PUNTI-APERTI.md B17) */
  --margine-alto-desktop: 46px;        /* 415:80, 15:9 */
  --margine-testi-02-desktop: 72px;    /* 19:3 */

  /* Filetti: 1 px nel colore del testo principale (letto dai pixel del disegno) */
  --filetto: 1px solid var(--testo-primario);

  /* Header iniziale (415:80): le voci partono ogni 82,5 px; «About» e social
     finiscono 19 px prima del filetto */
  --passo-voci-intestazione: 82.5px;
  --alto-testi-intestazione: 25px;     /* distanza dei testi dal bordo alto */
  --rientro-extra-intestazione: 19px;

  /* Header sticky (242:2): marchio a 40 px, 52 px a destra, pillola del capitolo */
  --margine-sticky-sinistra: 40px;
  --margine-sticky-destra: 52px;
  --larghezza-capitolo-sticky: 350px;
  --raggio-capitolo-sticky: 17px;
  --distanza-capitolo-sticky: 55px;
  --distanza-indicatore-sticky: 32px;  /* dall'alto della voce all'indicatore */

  /* Hero smartphone (250:2): da y 64 a 823; eyebrow a 94; testo 105 px sotto il titolo
     (lo spazio lasciato alle sfere). Hero tablet (509:258): da y 64 a 772 */
  --hero-altezza-smartphone: 759px;
  --hero-alto-smartphone: 30px;
  --hero-spazio-testo-smartphone: 105px;
  --hero-altezza-tablet: 708px;

  /* Hero desktop (3:7): l'hero va da y 64 a 766 nel disegno */
  --hero-altezza: 702px;
  --hero-alto: 52px;                  /* eyebrow a y 116 */
  --hero-spazio-titolo: 18px;         /* eyebrow → titolo */
  --hero-spazio-invito: 62px;         /* testo → «Scorri per iniziare» */
  --hero-larghezza-titolo: 560px;
  --hero-larghezza-testo: 455px;
  --hero-alto-citazione: 66px;        /* citazione a y 130 */
  --hero-larghezza-citazione: 376px;

  /* Sezione 02 (384:25): alta 740 px; posizioni di card e riquadro in css/sezione-02.css */
  --s02-altezza: 740px;

  /* Card della sezione 02 (415:2 …) */
  --ombra-card-02: 0 12px 30px rgba(31, 26, 61, 0.08);

  /* Sezioni dati 03–07 (55:2, 63:2, 82:2 …) */
  --margine-sezioni-dati-desktop: 56px;           /* px-56 del frame di sezione */
  --larghezza-colonna-testo: 316px;
  --larghezza-palco: 940px;
  --ombra-palco: 0 16px 34px rgba(26, 20, 51, 0.05);          /* 55:11 */
  --ombra-kpi: 0 10px 22px rgba(31, 26, 61, 0.05);            /* 415:32 */
  --ombra-scheda: 0 8px 20px rgba(31, 26, 61, 0.05);          /* 55:57, 63:20 */
  --ombra-grafico: 0 8px 20px rgba(31, 26, 61, 0.04);         /* 63:38 */
  --ombra-kpi-evidenza: 0 10px 24px rgba(36, 28, 71, 0.07);   /* 63:15 */
  --ombra-approfondimento: 0 12px 28px rgba(31, 26, 61, 0.06); /* 184:2 */
  --sfumatura-kpi-evidenza: linear-gradient(90deg, rgba(246, 244, 255, 0.98), rgba(224, 217, 255, 0.98)); /* 63:15 */
  --sfumatura-barra-principale: linear-gradient(90deg, #ccc2ff, #8c75e8);  /* 63:48, barra OpenCRISPR-1 on-target */
  --ombra-kpi-compatta: 0 8px 18px rgba(26, 20, 51, 0.04);                  /* 424:79 */
  --ombra-grafico-06-07: 0 8px 18px rgba(26, 20, 51, 0.03);                 /* 97:27, 122:2 */
  --sfumatura-kpi-06: linear-gradient(90deg, rgba(246, 244, 255, 0.98), rgba(227, 219, 255, 0.98)); /* 424:91 */
  /* AUROC (charts.js: «490 px per 1,0 a partire da 0,80»): l'asse 0,80–1,00 è alto 98 px */
  --altezza-grafico-auroc: 98px;

  /* Blocco figura (708:681): larghezza dell'immagine nella cornice, dove non la
     occupa tutta (03 e 05; su smartphone sempre tutta). Mai oltre la dimensione
     nativa (css/figure.css) */
  --figura-03-desktop: 600px;          /* 708:513 */
  --figura-03-tablet: 520px;           /* 708:516 */
  --figura-05-desktop: 580px;          /* 708:591 */
  --figura-05-tablet: 500px;           /* 708:606 */
  /* Segnaposto 3D della 07 (705:117): riquadri tratteggiati e legenda */
  --segnaposto-3d-desktop: 315px;      /* 705:53 */
  --segnaposto-3d-alto-desktop: 300px;
  --legenda-3d-desktop: 190px;         /* 705:57 */
  --segnaposto-3d-tablet: 243px;       /* 705:76 */
  --segnaposto-3d-alto-tablet: 260px;
  --legenda-3d-tablet: 170px;          /* 705:80 */
  --segnaposto-3d-alto-smartphone: 200px; /* 705:99 */
  /* Finestra «Ingrandisci» desktop (711:502) */
  --larghezza-ingrandimento: 1200px;
  /* Visualizzatore 3D della 07 (712:501): schede da 320, area 3D alta 240, campo 96 */
  --v3d-scheda: 320px;                 /* 712:504 */
  --v3d-area-alta: 240px;              /* 712:506 */
  --v3d-campo: 96px;                   /* 712:519 */
  --v3d-tabella-alta: 320px;           /* tabella testuale: scorre dentro questa altezza */
  /* Pagine informative (777:65): colonna di lettura (~70 caratteri) e indice a sinistra */
  --colonna-lettura: 640px;            /* 777:90 */
  --colonna-indice: 300px;             /* 777:81 */
}

@media (min-width: 1280px) {
  :root { --larghezza-contenuto: var(--larghezza-desktop); }
}