/* SKATE IRAN — Unified SVG Icon System v1 */

:root {
  --si-icon-color: currentColor;
  --si-icon-accent: #c7ff18;
}

.si-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -0.25em;
  color: var(--si-icon-color);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-sizing: border-box;
}

.si-icon-sm {
  width: 16px;
  height: 16px;
}

.si-icon-md {
  width: 22px;
  height: 22px;
}

.si-icon-lg {
  width: 30px;
  height: 30px;
}

.si-icon-xl {
  width: 40px;
  height: 40px;
}

.si-icon-accent {
  color: var(--si-icon-accent);
}

.si-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #c7ff18;
  background: rgba(199,255,24,.08);
  border: 1px solid rgba(199,255,24,.22);
}

.si-icon-box .si-icon {
  width: 24px;
  height: 24px;
}

.si-icon-box:hover {
  background: rgba(199,255,24,.14);
  border-color: rgba(199,255,24,.45);
}

.si-icon,
.si-icon-box {
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

@media (max-width: 768px) {
  .si-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .si-icon-box .si-icon {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-icon,
  .si-icon-box {
    transition: none;
  }
}