/* ==========================================================================
   Hubble Acceleration Program — Design tokens
   Extracted 1:1 from the Elementor global kit of programmahubble.it
   (kit id 7) plus the measured component values of the live page.
   ========================================================================== */

:root {
  /* ---------- Colour: global palette ---------- */
  --color-primary: #533DE2;        /* Elementor "Primary"   */
  --color-secondary: #FF004F;      /* Elementor "Secondary" */
  --color-text: #140261;           /* Elementor "Text"      */
  --color-accent: #F7F8FA;         /* Elementor "Accent"    */
  --color-grey-100: #E9E9E9;
  --color-grey-500: #8391A3;

  /* ---------- Colour: derived / component values ---------- */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-ink: #0B032A;            /* portfolio card copy   */
  --color-cta: #FD0056;            /* Apply Now button      */
  --color-cta-border: #CC0448;
  --color-footer-bar: #412FB0;
  --color-card-border: #EAEAEA;
  --color-nav-surface: rgba(20, 2, 97, 0.7);
  --color-nav-border: rgba(35, 6, 153, 0.7);
  --color-nav-item: #1E0580;
  --color-nav-item-active: #2907B1;
  --color-nav-item-border: #230699;

  /* ---------- Rules: the 1px grid the whole site is drawn on ----------
     The layout is not implied, it is visible: container edges, the column
     division and each grid cell are outlined with a hairline. Colour depends
     on the ground it sits on. */
  --rule: #8391A3;                        /* hairline on light grounds     */
  --rule-strong: #333333;                 /* the promoter bands' base rule */
  --rule-on-purple: rgba(255, 255, 255, 0.48);
  --rule-on-purple-soft: rgba(255, 255, 255, 0.32);
  --rule-cell-on-purple: rgba(255, 255, 255, 0.31);
  /* The middle rule sits at 67% of the container: a 1px gradient in a band
     covering the right third, repeated down the element. */
  --rule-third: linear-gradient(90deg, var(--rule) 1px, transparent 1px);

  /* ---------- Gradients ---------- */
  --gradient-benefit: linear-gradient(140deg, #533DE2 0%, #3F28CC 50%, #ADA3E9 100%);
  --gradient-rule: linear-gradient(90deg, #8391A3 1px, #FFFFFF 1px);
  --gradient-carousel-band: linear-gradient(#533DE2 0%, #533DE2 80%, #FFFFFF 80%, #FFFFFF 100%);

  /* ---------- Typography: families ---------- */
  --font-display: "univia-pro", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-alt: "paralucent-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Typography: scale (Elementor global typography) ---------- */
  /* Display XL — univia-pro 900 */
  --type-display-xl-size: 6rem;      /* 96px */
  --type-display-xl-lh: 6rem;
  /* Display L — univia-pro 400 */
  --type-display-l-size: 4.5rem;     /* 72px */
  --type-display-l-lh: 4.5rem;
  /* Display M — univia-pro 400 */
  --type-display-m-size: 3.5rem;     /* 56px */
  --type-display-m-lh: 3.5rem;
  /* Heading — univia-pro 900 */
  --type-heading-size: 2.5rem;       /* 40px */
  --type-heading-lh: 3rem;           /* 48px */
  /* Body XL — neue-haas 400 */
  --type-body-xl-size: 2rem;         /* 32px */
  --type-body-xl-lh: 2.5rem;         /* 40px */
  /* Body L — neue-haas 400 */
  --type-body-l-size: 1.5rem;        /* 24px */
  --type-body-l-lh: 2rem;            /* 32px */
  /* Body M — neue-haas 400 */
  --type-body-m-size: 1.125rem;      /* 18px */
  --type-body-m-lh: 1.6875rem;       /* 27px */
  /* Body — neue-haas 400 */
  --type-body-size: 1rem;            /* 16px */
  --type-body-lh: 1.5rem;
  /* Body S — neue-haas 400 */
  --type-body-s-size: 0.875rem;      /* 14px */
  --type-body-s-lh: 1.3125rem;       /* 21px */
  /* Body XS (eyebrow) — neue-haas 800 uppercase */
  --type-body-xs-size: 0.725rem;     /* 11.6px */
  --type-body-xs-lh: 0.725rem;

  /* Prose line-height used by the long-form body copy on the page */
  --type-prose-lh: 2.3rem;           /* 36.8px against 24px */

  /* ---------- Layout ---------- */
  --container-max: 1320px;           /* e-con container   */
  --container-narrow: 1140px;        /* boxed section     */
  --gutter: 60px;
  --gutter-narrow: 150px;
  --col-narrow: 436px;               /* left rail  (1/3)  */
  --col-wide: 884px;                 /* right rail (2/3)  */

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
  --space-14: 160px;

  /* ---------- Radii ---------- */
  --radius-xs: 3px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;

  /* ---------- Elevation ---------- */
  --shadow-card: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
  --shadow-photo: 0 8px 26px -4px rgba(0, 0, 0, 0.29);
  --shadow-video: 0 24px 48px -12px rgba(67, 48, 144, 0.6);
  --shadow-nav: 0 16px 16px -8px rgba(0, 0, 0, 0.25);
  --shadow-cta: 0 8px 16px -4px rgba(0, 0, 0, 0.25);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 0.4s;
  --duration-base: 0.8s;
  --duration-slow: 1.2s;
  --duration-icon: 0.25s;        /* accordion +/- : one beat for stroke and colour */

  /* ---------- Breakpoints (documented; media queries use literals) ----------
     mobile       <= 767px
     tablet       <= 1024px
     tablet-extra <= 1200px
     laptop       <= 1366px
     widescreen   >= 2400px
     ------------------------------------------------------------------------ */
}

/* Fluid display sizes, matching the kit's own responsive overrides.

   **`--type-display-l` non scende piu' a 56 sotto i 1200.** Il gradino c'era
   nel kit ma non nella pagina: misurata la fonte, i titoli di sezione stanno a
   **72px a 768, 834, 1024, 1100 e 1200**, identici al desktop. Il gradino vero
   arriva solo sotto i 768, e quello resta (40px).

   Finche' il token scendeva a 56, il sito faceva una cosa senza senso: titoli
   a 72 su un tablet da 1024, a **56** su un portatile da 1100, di nuovo a 72 su
   un monitor da 1280. Allargando la finestra il titolo rimpiccioliva. Era anche
   il motivo per cui serviva una regola apposta per i titoli a tablet: adesso
   non serve piu', il token basta.

   Lo usano i dieci titoli di sezione e `.menu-overlay__link`, che quindi sopra
   i 767 e' 72 ovunque invece che 56 fra 768 e 1200: una misura sola, che e'
   quello che Francesca ha chiesto - *"che i titoli abbiano ognuno le proprie
   grandezze"*. */
@media (max-width: 1200px) {
  :root {
    --gutter-narrow: 60px;
  }
}

@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
    --gutter-narrow: 32px;
  }
}

@media (max-width: 767px) {
  :root {
    --type-display-xl-size: 3rem;      /* 48px */
    --type-display-xl-lh: 3rem;
    --type-display-l-size: 2.5rem;     /* 40px */
    --type-display-l-lh: 2.5rem;
    --type-display-m-size: 2rem;       /* 32px */
    --type-display-m-lh: 2.25rem;
    --type-heading-size: 1.75rem;      /* 28px */
    --type-heading-lh: 2.125rem;       /* 34px */
    --type-body-xl-size: 1.5rem;
    --type-body-l-size: 1.125rem;
    --type-body-l-lh: 1.75rem;
    --type-prose-lh: 1.75rem;
    --gutter: 16px;
    --gutter-narrow: 16px;
    --space-14: 80px;
    --space-13: 64px;
  }
}