/* ============================================================
   TAKEAWAY — Design Tokens
   Struttura: Primitive → Alias
   Tipografia desktop/mobile gestita automaticamente via @media
   Nei componenti usare SOLO i token --text-*, --lh-*, --ls-*
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   LAYER 1 — PRIMITIVE
   Valori grezzi. Non usare direttamente nei componenti.
   ──────────────────────────────────────────────────────────── */
:root {

  /* ── Colori ── */
  --primitive-white:        #ffffff;
  --primitive-black:        #000000;
  --primitive-brand-200:    #c2c2c2;
  --primitive-brand-300:    #9b9b9c;
  --primitive-brand-400:    #8a8a8a;
  --primitive-brand-500:    #545455;
  --primitive-brand-600:    #333334;
  --primitive-brand-700:    #181818;
  --primitive-brand-800:    #131313;
  --primitive-blue:         #302683;
  --primitive-yellow:       #ffed00;
  --primitive-red:          #e30513;
  --primitive-green:        #009640;

  --primitive-line: #3a3a3a;

  /* ── Spacing ── */
  --primitive-sp-4:    4px;
  --primitive-sp-8:    8px;
  --primitive-sp-16:   16px;
  --primitive-sp-24:   24px;
  --primitive-sp-32:   32px;
  --primitive-sp-40:   40px;
  --primitive-sp-48:   48px;
  --primitive-sp-56:   56px;
  --primitive-sp-64:   64px;
  --primitive-sp-80:   80px;
  --primitive-sp-112:  112px;
  --primitive-sp-120:  120px;
  --primitive-sp-160:  160px;

  /* ── Font ── */
  --primitive-font:       'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  --primitive-fw-light:   300;
  --primitive-fw-regular: 400;
  --primitive-fw-semibold:600;

  /* ── Scala tipografica Desktop ── */
  --primitive-hero-desktop:    118px;
  --primitive-h1-desktop:      100px;
  --primitive-h2-desktop:       80px;
  --primitive-h3-desktop:       60px;
  --primitive-h4-desktop:       40px;
  --primitive-h5-desktop:       34px;
  --primitive-h6-desktop:       27px;
  --primitive-body-lg-desktop:  19px;
  --primitive-body-md-desktop:  17px;
  --primitive-body-sm-desktop:  15px;

  /* ── Scala tipografica Mobile ── */
  --primitive-hero-mobile:     66px;
  --primitive-h1-mobile:       56px;
  --primitive-h2-mobile:       45px;
  --primitive-h3-mobile:       34px;
  --primitive-h4-mobile:       27px;
  --primitive-h5-mobile:       23px;
  --primitive-h6-mobile:       19px;
  --primitive-body-lg-mobile:  19px;
  --primitive-body-md-mobile:  17px;
  --primitive-body-sm-mobile:  15px;

  /* ── Line height Desktop ── */
  --primitive-lh-hero-desktop:     130px;
  --primitive-lh-h1-desktop:       115px;
  --primitive-lh-h2-desktop:        92px;
  --primitive-lh-h3-desktop:        69px;
  --primitive-lh-h4-desktop:        48px;
  --primitive-lh-h5-desktop:        46px;
  --primitive-lh-h6-desktop:        36px;
  --primitive-lh-body-lg-desktop:   24px;
  --primitive-lh-body-md-desktop:   22px;
  --primitive-lh-body-sm-desktop:   19px;

  /* ── Line height Mobile ── */
  --primitive-lh-hero-mobile:    73px;
  --primitive-lh-h1-mobile:      64px;
  --primitive-lh-h2-mobile:      52px;
  --primitive-lh-h3-mobile:      39px;
  --primitive-lh-h4-mobile:      33px;
  --primitive-lh-h5-mobile:      26px;
  --primitive-lh-h6-mobile:      24px;
  --primitive-lh-body-lg-mobile: 23px;
  --primitive-lh-body-md-mobile: 22px;
  --primitive-lh-body-sm-mobile: 19px;

  /* ── Letter spacing ── */
  --primitive-ls-0:  0px;
  --primitive-ls-05: 0.5px;
  --primitive-ls-1:  1px;
  --primitive-ls-2:  2px;
  --primitive-ls-3:  3px;

  /* ── Radii ── */
  --primitive-radii-sm:     4px;
  --primitive-radii-md:     8px;
  --primitive-radii-lg:     16px;
  --primitive-radii-xl:     24px;
  --primitive-radii-circle: 9999px;
  --primitive-radii-button: 0px;
}



/* ────────────────────────────────────────────────────────────
   LAYER 2 — ALIAS
   Token semantici. Questi si usano nei componenti.
   La scala tipografica si aggiorna automaticamente via @media.
   ──────────────────────────────────────────────────────────── */
:root {

  /* ── Font ── */
  --font:        var(--primitive-font);
  --fw-regular:  var(--primitive-fw-regular);
  --fw-light:    var(--primitive-fw-light);
  --fw-semibold: var(--primitive-fw-semibold);

  /* ── Colori sfondo ── */
  --c-bg:       var(--primitive-black);
  --c-bg-800:   var(--primitive-brand-800);
  --c-bg-700:   var(--primitive-brand-700);
  --c-surface:  var(--primitive-brand-600);

  /* ── Colori testo ── */
  --c-text:       var(--primitive-white);
  --c-text-inv:   var(--primitive-black);
  --c-text-muted: var(--primitive-brand-400);
  --c-label:      var(--primitive-brand-400);
  --c-disabled:   var(--primitive-brand-500);
  --c-text-50:    rgba(255,255,255,0.50);
  --c-text-30:    rgba(255,255,255,0.30);

  /* ── Colori bordo ── */
  --c-border:       var(--primitive-line);
  

  /* ── Colori bottoni ── */
  --c-btn-bg:   var(--primitive-white);
  --c-btn-text: var(--primitive-black);

  /* ── Sistema ── */
  --c-alert:   var(--primitive-red);
  --c-success: var(--primitive-green);
  --c-warning: #d07010;

  /* ── Spacing ── */
  --sp-xs:   var(--primitive-sp-4);
  --sp-sm:   var(--primitive-sp-8);
  --sp-md:   var(--primitive-sp-16);
  --sp-lg:   var(--primitive-sp-24);
  --sp-xl:   var(--primitive-sp-32);
  --sp-2xl:  var(--primitive-sp-48);
  --sp-3xl:  var(--primitive-sp-64);
  --sp-4xl:  var(--primitive-sp-80);
  --sp-5xl:  var(--primitive-sp-112);
  --sp-6xl:  var(--primitive-sp-120);
  --sp-7xl:  var(--primitive-sp-160);

  /* ── Radii ── */
  --radii-sm:     var(--primitive-radii-sm);
  --radii-md:     var(--primitive-radii-md);
  --radii-lg:     var(--primitive-radii-lg);
  --radii-xl:     var(--primitive-radii-xl);
  --radii-circle: var(--primitive-radii-circle);
  --radii-btn:    var(--primitive-radii-button);

  /* ── Layout ── */
  --margin-page: var(--primitive-sp-32);

  /* ── Logo mark size — brand guidelines: 1/5 width landscape, 2/5 height portrait ── */
  --mark-size: 20vw;

  /* ════════════════════════════════════════════════════════
     TIPOGRAFIA — Desktop (default)
     Su mobile tutto si aggiorna automaticamente via @media
     Nei componenti: font-size: var(--text-h3)
                     line-height: var(--lh-h3)
                     letter-spacing: var(--ls-body)
     ════════════════════════════════════════════════════════ */

  /* Font size */
  --text-hero:    var(--primitive-hero-desktop);    /* 118px → 66px  */
  --text-h1:      var(--primitive-h1-desktop);      /* 100px → 56px  */
  --text-h2:      var(--primitive-h2-desktop);      /*  80px → 45px  */
  --text-h3:      var(--primitive-h3-desktop);      /*  60px → 34px  */
  --text-h4:      var(--primitive-h4-desktop);      /*  40px → 23px  */
  --text-h5:      var(--primitive-h5-desktop);      /*  34px → 21px  */
  --text-h6:      var(--primitive-h6-desktop);      /*  27px → 19px  */
  --text-body-lg: var(--primitive-body-lg-desktop); /*  18px → 17px  */
  --text-body-md: var(--primitive-body-md-desktop); /*  16px → 16px  */
  --text-body-sm: var(--primitive-body-sm-desktop); /*  14px → 14px  */

  /* Line height */
  --lh-hero:    var(--primitive-lh-hero-desktop);
  --lh-h1:      var(--primitive-lh-h1-desktop);
  --lh-h2:      var(--primitive-lh-h2-desktop);
  --lh-h3:      var(--primitive-lh-h3-desktop);
  --lh-h4:      var(--primitive-lh-h4-desktop);
  --lh-h5:      var(--primitive-lh-h5-desktop);
  --lh-h6:      var(--primitive-lh-h6-desktop);
  --lh-body-lg: var(--primitive-lh-body-lg-desktop);
  --lh-body-md: var(--primitive-lh-body-md-desktop);
  --lh-body-sm: var(--primitive-lh-body-sm-desktop);

  /* Letter spacing */
  --ls-tight: var(--primitive-ls-0);
  --ls-body:  var(--primitive-ls-05);   /* 0.5px */
  --ls-md:    var(--primitive-ls-1);    /* 1px   */
  --ls-lg:    var(--primitive-ls-2);    /* 2px   */
  --ls-label: var(--primitive-ls-3);    /* 3px — sezioni uppercase */

  /* ════════════════════════════════════════════════════════
     ECCEZIONI — solo valori che non hanno un token primitivo
     ════════════════════════════════════════════════════════ */

  /* line-height manifesto — ratio custom */
  --lh-manifesto: calc(92 / 80);



  /* ════════════════════════════════════════════════════════
     ORBIT CENTER — gestiti dal JS, convertiti in SVG units
     Cambia solo questi valori per controllare la tipografia
     del centro dell'orbit su desktop e mobile
     ════════════════════════════════════════════════════════ */
  --orbit-center-title-desktop: var(--text-h5);      /* 34px desktop */
  --orbit-center-title-mobile:  var(--text-h5);      /* 21px mobile (auto) */
  --orbit-center-sub-desktop:   var(--text-body-md); /* 16px desktop */
  --orbit-center-sub-mobile:    var(--text-body-md); /* 16px mobile (auto) */
  --orbit-center-sub-color:     rgba(255,255,255,0.6);

  /* Dot radius orbit — in pixel reali */
  --orbit-dot-radius-desktop: 6px; /* 6px raggio = 12px diametro */
  --orbit-dot-radius-mobile:  4px;

  /* ── Orbit center text — valori in px CSS, il JS li scala con stageW/640
     Desktop scale ≈ 1.0 (stage ~640px) → valore = dimensione visiva finale
     Mobile scale ≈ 0.57 (stage ~367px) → valore / 0.57 = dimensione visiva
     Esempio mobile: vuoi 22px visivi → 22 / 0.57 = ~38px qui ── */
  --orbit-center-title-px-desktop: 34;   /* ~34px visivi desktop */
  --orbit-center-title-px-mobile:  38;   /* ~22px visivi mobile  */
  --orbit-center-sub-px-desktop:   16;   /* ~16px visivi desktop */
  --orbit-center-sub-px-mobile:    26;   /* ~15px visivi mobile  */
}

/* ── Mobile overrides — automatico, non toccare nei componenti ── */
@media (max-width: 768px) {
  :root {
    --margin-page: 20px;

    /* Label — valore mobile esplicito (evita clamp troppo piccolo) */
    --text-hero:    var(--primitive-hero-mobile);
    --text-h1:      var(--primitive-h1-mobile);
    --text-h2:      var(--primitive-h2-mobile);
    --text-h3:      var(--primitive-h3-mobile);
    --text-h4:      var(--primitive-h4-mobile);
    --text-h5:      var(--primitive-h5-mobile);
    --text-h6:      var(--primitive-h6-mobile);
    --text-body-lg: var(--primitive-body-lg-mobile);
    --text-body-md: var(--primitive-body-md-mobile);
    --text-body-sm: var(--primitive-body-sm-mobile);

    --lh-hero:    var(--primitive-lh-hero-mobile);
    --lh-h1:      var(--primitive-lh-h1-mobile);
    --lh-h2:      var(--primitive-lh-h2-mobile);
    --lh-h3:      var(--primitive-lh-h3-mobile);
    --lh-h4:      var(--primitive-lh-h4-mobile);
    --lh-h5:      var(--primitive-lh-h5-mobile);
    --lh-h6:      var(--primitive-lh-h6-mobile);
    --lh-body-lg: var(--primitive-lh-body-lg-mobile);
    --lh-body-md: var(--primitive-lh-body-md-mobile);
    --lh-body-sm: var(--primitive-lh-body-sm-mobile);

  }
}