/**
 * Icon Molecule Styles
 *
 * Color is inherited via currentColor — set `color` on the parent.
 */

.icon {



  --icon-size-xxs: 16px;
  --svg-stroke-width-xxs: 1.8;

  --icon-size-xs: 20px;
  --svg-stroke-width-xs: 2.2;

  --icon-size-s: 26px;
  --svg-stroke-width-s: 2.8;

  --icon-size-m: 36px;
  --svg-stroke-width-m: 3.5;

  --icon-size-l: 64px;
  --svg-stroke-width-l: 5;

  --icon-size-xl: 92px;
  --svg-stroke-width-xl: 7;

  --icon-size-xxl: 176px;
  --svg-stroke-width-xxl: 9;


  --icon-size: var(--icon-size-s);
  --svg-stroke-width: var(--svg-stroke-width-s);

}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  width: var(--icon-size);
  height: var(--icon-size);
}

.icon svg {
  display: block;
  width: 100%;
  height: 100%;
}


@media (min-width: 768px) {
  .icon { --icon-size: var(--icon-size-s); } /* tablet */
}

@media (min-width: 1200px) {
  .icon { --icon-size: var(--icon-size-m); } /* desktop */
}

/* ── Size variants ── */
.icon--xxs {
  --icon-size: var(--icon-size-xxs);
  --svg-stroke-width: var(--svg-stroke-width-xxs);
}

.icon--xs {
  --icon-size: var(--icon-size-xs);
  --svg-stroke-width: var(--svg-stroke-width-xs);
}

.icon--s {
  --icon-size: var(--icon-size-s);
  --svg-stroke-width: var(--svg-stroke-width-s);
}

.icon--m {
  --icon-size: var(--icon-size-m);
  --svg-stroke-width: var(--svg-stroke-width-m);
}

.icon--l {
  --icon-size: var(--icon-size-l);
  --svg-stroke-width: var(--svg-stroke-width-l);
}

.icon--xl {
  --icon-size: var(--icon-size-xl);
  --svg-stroke-width: var(--svg-stroke-width-xl);
}

.icon--xxl {
  --icon-size: var(--icon-size-xxl);
  --svg-stroke-width: var(--svg-stroke-width-xxl);
}