/* ============================================================
   EVERMORE ICON TOKENS — PURE VISUAL STYLE
   .ui-icon = base container
   .ui-icon-NAME = specific icon
   ============================================================ */

/* Base icon container */
.ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  vertical-align: middle;
}

/* ----------------------------------------------
   SIZE VARIANTS
---------------------------------------------- */
.ui-icon.xs { width: 14px; height: 14px; }
.ui-icon.sm { width: 18px; height: 18px; }
.ui-icon.md { width: 22px; height: 22px; } /* default-ish */
.ui-icon.lg { width: 26px; height: 26px; }
.ui-icon.xl { width: 32px; height: 32px; }

/* ----------------------------------------------
   COLOR VARIANTS (tint filters for SVG icons)
---------------------------------------------- */

/* Inherit accent color */
.ui-icon.accent {
  filter: brightness(0) saturate(100%) invert(36%) sepia(67%) saturate(2598%)
          hue-rotate(207deg) brightness(95%) contrast(104%);
}

/* Subtle Ink */
.ui-icon.ink {
  filter: brightness(0) saturate(100%) invert(22%) sepia(14%) saturate(800%)
          hue-rotate(183deg) brightness(94%) contrast(90%);
}

/* Danger */
.ui-icon.danger {
  filter: brightness(0) saturate(100%) invert(29%) sepia(96%) saturate(1786%)
          hue-rotate(342deg) brightness(91%) contrast(104%);
}

/* Success */
.ui-icon.success {
  filter: brightness(0) saturate(100%) invert(59%) sepia(19%) saturate(2000%)
          hue-rotate(99deg) brightness(85%) contrast(94%);
}


/* ============================================================
   ICON ASSETS — MAP UI CLASSES TO SVG FILES
   Place SVGs in: /assets/img/icons/
============================================================ */

/* --- Navigation Icons --- */
.ui-icon-menu {
  background-image: url('/assets/img/icons/menu.svg');
}

.ui-icon-close,
.ui-icon-x {
  background-image: url('/assets/img/icons/x.svg');
}

.ui-icon-arrow-right {
  background-image: url('/assets/img/icons/arrow-right.svg');
}

.ui-icon-arrow-left {
  background-image: url('/assets/img/icons/arrow-left.svg');
}

.ui-icon-chevron-down {
  background-image: url('/assets/img/icons/chevron-down.svg');
}

.ui-icon-chevron-up {
  background-image: url('/assets/img/icons/chevron-up.svg');
}

/* --- Status Icons --- */
.ui-icon-check {
  background-image: url('/assets/img/icons/check.svg');
}

.ui-icon-info {
  background-image: url('/assets/img/icons/info.svg');
}

.ui-icon-warning {
  background-image: url('/assets/img/icons/warning.svg');
}

.ui-icon-error {
  background-image: url('/assets/img/icons/error.svg');
}

/* --- Misc Icons --- */
.ui-icon-user {
  background-image: url('/assets/img/icons/user.svg');
}

.ui-icon-search {
  background-image: url('/assets/img/icons/search.svg');
}

.ui-icon-calendar {
  background-image: url('/assets/img/icons/calendar.svg');
}

.ui-icon-upload {
  background-image: url('/assets/img/icons/upload.svg');
}

/* ==========================================
   MOBILE — icons shrink naturally
========================================== */
@media (max-width: 700px) {
  .ui-icon {
    width: 18px;
    height: 18px;
  }
}