/* ===================================
   ICONS — dimensioni con tokens + responsive
   =================================== */

/* Base (quadrate: width = height) */
.icon-1  { width: var(--space-1);  height: var(--space-1); }   /* 4px  */
.icon-2  { width: var(--space-2);  height: var(--space-2); }   /* 8px  */
.icon-3  { width: var(--space-3);  height: var(--space-3); }   /* 12px */
.icon-4  { width: var(--space-4);  height: var(--space-4); }   /* 16px */
.icon-5  { width: var(--space-5);  height: var(--space-5); }   /* 20px */
.icon-6  { width: var(--space-6);  height: var(--space-6); }   /* 24px */
.icon-8  { width: var(--space-8);  height: var(--space-8); }   /* 32px */
.icon-10 { width: var(--space-10); height: var(--space-10); }  /* 40px */
.icon-12 { width: var(--space-12); height: var(--space-12); }  /* 48px */
.icon-16 { width: var(--space-16); height: var(--space-16); }  /* 64px */
.icon-20 { width: var(--space-20); height: var(--space-20); }  /* 80px */
.icon-24 { width: var(--space-24); height: var(--space-24); }  /* 96px */
.icon-32 { width: var(--space-32); height: var(--space-32); }  /* 128px */

/* -----------------------------------
   Responsive variants
   Usa: class="icon-8 icon-12-md icon-16-lg"
   ----------------------------------- */

/* ≥ 480px (sm) */
@media (min-width: 480px) {
  .icon-1-sm  { width: var(--space-1);  height: var(--space-1); }
  .icon-2-sm  { width: var(--space-2);  height: var(--space-2); }
  .icon-3-sm  { width: var(--space-3);  height: var(--space-3); }
  .icon-4-sm  { width: var(--space-4);  height: var(--space-4); }
  .icon-5-sm  { width: var(--space-5);  height: var(--space-5); }
  .icon-6-sm  { width: var(--space-6);  height: var(--space-6); }
  .icon-8-sm  { width: var(--space-8);  height: var(--space-8); }
  .icon-10-sm { width: var(--space-10); height: var(--space-10); }
  .icon-12-sm { width: var(--space-12); height: var(--space-12); }
  .icon-16-sm { width: var(--space-16); height: var(--space-16); }
  .icon-20-sm { width: var(--space-20); height: var(--space-20); }
  .icon-24-sm { width: var(--space-24); height: var(--space-24); }
  .icon-32-sm { width: var(--space-32); height: var(--space-32); }
}

/* ≥ 768px (md) */
@media (min-width: 768px) {
  .icon-1-md  { width: var(--space-1);  height: var(--space-1); }
  .icon-2-md  { width: var(--space-2);  height: var(--space-2); }
  .icon-3-md  { width: var(--space-3);  height: var(--space-3); }
  .icon-4-md  { width: var(--space-4);  height: var(--space-4); }
  .icon-5-md  { width: var(--space-5);  height: var(--space-5); }
  .icon-6-md  { width: var(--space-6);  height: var(--space-6); }
  .icon-8-md  { width: var(--space-8);  height: var(--space-8); }
  .icon-10-md { width: var(--space-10); height: var(--space-10); }
  .icon-12-md { width: var(--space-12); height: var(--space-12); }
  .icon-16-md { width: var(--space-16); height: var(--space-16); }
  .icon-20-md { width: var(--space-20); height: var(--space-20); }
  .icon-24-md { width: var(--space-24); height: var(--space-24); }
  .icon-32-md { width: var(--space-32); height: var(--space-32); }
}

/* ≥ 1024px (lg) */
@media (min-width: 1024px) {
  .icon-1-lg  { width: var(--space-1);  height: var(--space-1); }
  .icon-2-lg  { width: var(--space-2);  height: var(--space-2); }
  .icon-3-lg  { width: var(--space-3);  height: var(--space-3); }
  .icon-4-lg  { width: var(--space-4);  height: var(--space-4); }
  .icon-5-lg  { width: var(--space-5);  height: var(--space-5); }
  .icon-6-lg  { width: var(--space-6);  height: var(--space-6); }
  .icon-8-lg  { width: var(--space-8);  height: var(--space-8); }
  .icon-10-lg { width: var(--space-10); height: var(--space-10); }
  .icon-12-lg { width: var(--space-12); height: var(--space-12); }
  .icon-16-lg { width: var(--space-16); height: var(--space-16); }
  .icon-20-lg { width: var(--space-20); height: var(--space-20); }
  .icon-24-lg { width: var(--space-24); height: var(--space-24); }
  .icon-32-lg { width: var(--space-32); height: var(--space-32); }
}

/* ≥ 1280px (xl) */
@media (min-width: 1280px) {
  .icon-1-xl  { width: var(--space-1);  height: var(--space-1); }
  .icon-2-xl  { width: var(--space-2);  height: var(--space-2); }
  .icon-3-xl  { width: var(--space-3);  height: var(--space-3); }
  .icon-4-xl  { width: var(--space-4);  height: var(--space-4); }
  .icon-5-xl  { width: var(--space-5);  height: var(--space-5); }
  .icon-6-xl  { width: var(--space-6);  height: var(--space-6); }
  .icon-8-xl  { width: var(--space-8);  height: var(--space-8); }
  .icon-10-xl { width: var(--space-10); height: var(--space-10); }
  .icon-12-xl { width: var(--space-12); height: var(--space-12); }
  .icon-16-xl { width: var(--space-16); height: var(--space-16); }
  .icon-20-xl { width: var(--space-20); height: var(--space-20); }
  .icon-24-xl { width: var(--space-24); height: var(--space-24); }
  .icon-32-xl { width: var(--space-32); height: var(--space-32); }
}

/* ICON LOGO CHE SI PUO' CAMBIARE */
.icon-logo{
    display: block;
    height: 1.875rem;
    perspective: 1000px;
    position: relative;
    width: 64px;
    flex: 0 0 auto;
}
.icon-logo-portfolio{
    display: block;
    height: auto;
    perspective: 1000px;
    position: relative;
    width: 100px;
    flex: 0 0 auto;
}
/* ICONE PARTICOLARI */
.section-software-image {
    display: block;
    width: 120px;
    height: 50px;
    flex: 0 0 auto;
}
/* ICONE CARCHIO */
.icon-container-circle{
    padding:var(--space-4);
    border: 1px solid var(--color-black-20);
    border-radius:100%;
}
.icon-container{
    width:16px;
    height:16px;
}
.icon-button-container{
    width:16px;
    height:16px;
}
.icon-max{
    width:128px;
    height:128px;
}
.icon-extra-large{
    width:48px;
    height:48px;
}
.icon-large-medium{
    width:40px;
    height:40px;
}
.icon-large{
    width:32px;
    height:32px;
}
.icon-large-mobile-burger{
    width:32px;
    height:32px;
}
.icon-large-mobile-nav-burger{
    width:24px;
    height:24px;
}
.icon-medium{
    width:24px;
    height:24px;
}
.icon-small{
    width:16px;
    height:16px;
}
.icon-extra-small{
    width:12px;
    height:12px;
    flex: 0 0 auto;
}
.icon-dashboard{
    width:80px;
    height:80px;
}
.icon-fill{
    width:100%;
    height:100%;
}
.fill-black{
    fill: var(--color-secondary-950);
}
.fill-primary{
    fill: var(--color-primary-500);
}
.fill-secondary{
    fill: var(--color-secondary-200);
}
.fill-third{
    fill: var(--yellow-200);
}
.fill-white{
    fill: var(--color-third-100);
}
.fill-purple{
    fill: var(--purple);
}
.fill-none{
    fill:none;
}
.stroke-width-1{
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1px;
}
.stroke-width-2{
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}
.stroke-width-3{
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3px;
}
.stroke-white{
    stroke: var(--color-third-100);
}
.stroke-primary{
    stroke: var(--color-primary-500);
}
.hero-logo-wrapper {
  width: min(360px, 40vw);   /* regola tu */
  aspect-ratio: 3 / 2;
}

#logo-stroke {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Stroke base: blu molto scuro, quasi invisibile */
#logo-stroke .logo-stroke-path {
  fill: none;
  stroke: rgba(8, 44, 98, 0.9);  /* #082C62 con alpha */
  stroke-width: 0.7;
  opacity: 0.2;
}

/* Layer core + soft: entrambi seguono il puntino */
#logo-stroke .logo-stroke-highlight,
#logo-stroke .logo-stroke-highlight-soft {
  fill: none;
  stroke-linecap: round;           /* arrotonda le estremità → fade più naturale */
}

/* Core: molto chiaro, sottile, super “tech” */
#logo-stroke .logo-stroke-highlight {
  stroke: #f4f7ff;                 /* quasi bianco freddo */
  stroke-width: 0.4;
  opacity: 0;                      /* la gestiamo con GSAP */
  filter:
    drop-shadow(0 0 4px #bcd5ff)
    drop-shadow(0 0 12px #3b82ff)
    drop-shadow(0 0 22px #136ef5);
}

/* Linea luminosa che viene "disegnata" dal puntino */
#logo-stroke .logo-stroke-drawn {
  fill: none;
  stroke: #f4f7ff;          /* quasi bianco freddo */
  stroke-width: 0.9;        /* un filo più spessa del ghost */
  opacity: 0;               /* la gestiamo via JS */
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 4px #bcd5ff)
    drop-shadow(0 0 12px #3b82ff)
    drop-shadow(0 0 24px #136ef5);
}

/* Puntino luminoso */
#logo-orb {
  fill: url(#logo-orb-gradient);
  filter:
    drop-shadow(0 0 6px #3b82ff)
    drop-shadow(0 0 18px #3b82ff)
    drop-shadow(0 0 32px #136ef5);
}
@media (max-width: 767px) {
    .icon-max{
        width:88px;
        height:88px;
    }
    .icon-extra-large{
        width:32px;
        height:32px;
    }
    .icon-large-medium{
        width:28px;
        height:28px;
    }
    .icon-large{
        width:24px;
        height:24px;
    }
    .icon-medium{
        width:16px;
        height:16px;
    }
    .icon-extra-small{
        width:12px;
        height:12px;
    }
    .icon-stripe{
        width:77px;
        height:32px;
    }
    .icon-dashboard{
        width:64px;
        height:64px;
    }
    .icon-logo-portfolio{
        width: 75px;
    }
}

/* Ant Design Outlined (builder) — montate via public/js/builder/ui/ant-design-icon.js */
.builder-anticon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    line-height: 0;
    color: currentColor;
}

.builder-anticon-svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}