@layer exception {
  :where(html) {
  /* === BUTTON VARIANTS === */
:is(button, .btn, .icon-btn) {
    &[var*="pri"] {
      --_btn-color: var(--color-pri);
      background: var(--_btn-color);
      color: var(--color-pri-text);
    }
    &[var*="sec"] {
      --_btn-color: var(--color-sec);
      background: var(--_btn-color);
      color: var(--color-sec-text);
    }
    &[var*="gho"] {
      background: transparent;
      color: inherit;
    }
    &[var*="wrn"] {
      --_btn-color: var(--color-wrn);
      background: var(--_btn-color);
      color: var(--color-wrn-text);
    }
    &[var*="dgr"] {
      --_btn-color: var(--color-dgr);
      background: var(--_btn-color);
      color: var(--color-dgr-text);
    }
    /* :out suffix - works with any variant e.g. var="pri:out", var="sec:out" */
    &[var*=":out"] {
      background: transparent;
      color: var(--_btn-color);
      border: 1.5px solid currentColor;
    }
  }
  }

  /* === BUTTON SIZES === */
  :is(button, .btn) {
    &[sz="sm"] { height: var(--btn-height-sm); padding-inline: var(--space-sm); font-size: var(--text-sm); }
    &[sz="lg"] { height: var(--btn-height-lg); padding-inline: var(--space-lg); font-size: var(--text-lg); }
  }

  /* === ICON BUTTON SIZES === */
  .icon-btn {
    &[sz="sm"] { --_icon-btn-size: var(--icon-btn-size-sm); --_icon-size: var(--icon-size-sm); }
    &[sz="lg"] { --_icon-btn-size: var(--icon-btn-size-lg); --_icon-size: var(--icon-size-lg); }
  }

  /* === ICON BUTTON VARIANTS === */
  .icon-btn {
    &[var="pri"] {
      background: var(--_icon-btn-color);
      color: var(--color-pri-text);
      border-color: var(--_icon-btn-color);
    }
    &[var="sec"] {
      background: color-mix(in oklch, var(--_icon-btn-color), transparent 90%);
      color: var(--_icon-btn-color);
      border-color: transparent;
    }
    &[var="out"] {
      border-color: var(--gry-5);
      background: transparent;
    }
    &[var="gho"] {
      background: transparent;
      border-color: transparent;
    }
    &[var="gra"] {
      background: linear-gradient(135deg, var(--color-pri), var(--color-suc));
      color: white;
      border-color: transparent;
    }
    &[var="gla"] {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur-md));
      border-color: var(--glass-border);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    }
  }

  /* === ICON BUTTON COLORS === */
  .icon-btn {
    &[col="suc"] { --_icon-btn-color: var(--color-suc); }
    &[col="wrn"] { --_icon-btn-color: var(--color-wrn); }
    &[col="dgr"] { --_icon-btn-color: var(--color-dgr); }
  }

  /* === ICON BUTTON SHAPE === */
  .icon-btn {
    &[shape="round"] { border-radius: var(--radius-full); }
  }

  /* === BUTTON STATES === */
  :is(button, .btn, .icon-btn) {
    &[st="lod"] { opacity: 0.7; cursor: wait; }
    &[st="dis"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  }

  /* === TAG VARIANTS === */
  .tag {
    &[var="inf"] {
      background: light-dark(
        color-mix(in oklch, var(--blu-5), var(--gry-0) 85%),
        color-mix(in oklch, var(--blu-7), var(--gry-8) 80%)
      );
      color: light-dark(
        color-mix(in oklch, var(--blu-7), var(--gry-9) 30%),
        color-mix(in oklch, var(--blu-3), var(--gry-1) 20%)
      );
      border-color: light-dark(
        color-mix(in oklch, var(--blu-5), transparent 60%),
        color-mix(in oklch, var(--blu-6), transparent 50%)
      );
    }
    &[var="suc"] {
      background: light-dark(
        color-mix(in oklch, var(--grn-5), var(--gry-0) 85%),
        color-mix(in oklch, var(--grn-7), var(--gry-8) 80%)
      );
      color: light-dark(
        color-mix(in oklch, var(--grn-8), var(--gry-9) 30%),
        color-mix(in oklch, var(--grn-3), var(--gry-1) 20%)
      );
      border-color: light-dark(
        color-mix(in oklch, var(--grn-5), transparent 60%),
        color-mix(in oklch, var(--grn-6), transparent 50%)
      );
    }
    &[var="wrn"] {
      background: light-dark(
        color-mix(in oklch, var(--yel-7), var(--gry-0) 70%),
        color-mix(in oklch, var(--yel-7), var(--gry-8) 65%)
      );
      color: light-dark(
        color-mix(in oklch, var(--yel-9), var(--gry-9) 40%),
        color-mix(in oklch, var(--yel-2), var(--gry-1) 30%)
      );
      border-color: light-dark(
        color-mix(in oklch, var(--yel-5), transparent 50%),
        color-mix(in oklch, var(--yel-6), transparent 40%)
      );
    }
    &[var="dgr"] {
      background: light-dark(
        color-mix(in oklch, var(--red-7), var(--gry-0) 70%),
        color-mix(in oklch, var(--red-7), var(--gry-8) 65%)
      );
      color: light-dark(
        color-mix(in oklch, var(--red-7), var(--gry-9) 30%),
        color-mix(in oklch, var(--red-3), var(--gry-1) 20%)
      );
      border-color: light-dark(
        color-mix(in oklch, var(--red-5), transparent 60%),
        color-mix(in oklch, var(--red-6), transparent 50%)
      );
    }
  }

  /* === CARD VARIANTS === */
  .card {
    &[var="pri"] {
      background: var(--color-pri);
      color: var(--color-pri-text);
      border-color: transparent;
    }
    &[var="sec"] {
      background: var(--color-sec);
      color: var(--color-sec-text);
      border-color: transparent;
    }
    &[var="wrn"] {
      background: var(--color-wrn);
      color: var(--color-wrn-text);
      border-color: transparent;
    }
    &[var="dgr"] {
      background: var(--color-dgr);
      color: var(--color-dgr-text);
      border-color: transparent;
    }
    &[var="out"] {
      background: transparent;
      box-shadow: none;
      border-color: var(--border-muted);
    }
    &[var="gho"] {
      background: transparent;
      box-shadow: none;
      border-color: transparent;
    }
    &[var="glass"] {
      background: light-dark(
        color-mix(in oklch, white, transparent 20%),
        color-mix(in oklch, var(--gry-8), transparent 40%)
      );
      backdrop-filter: blur(12px);
      border-color: light-dark(
        color-mix(in oklch, white, transparent 50%),
        color-mix(in oklch, var(--gry-6), transparent 70%)
      );
      box-shadow:
        0 1px 2px 0 rgb(0 0 0 / 0.05),
        inset 0 1px 0 0 light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.05));
    }
    &[var="res"] {
      resize: horizontal;
      overflow: auto;
      border: 1px dashed var(--gry-6);
      min-width: 250px;
      max-width: 100%;
    }
  }

  /* === INPUT VALIDATION STATES === */
  input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"]),
  input:not([type]),
  textarea {
    &[st="err"] {
      border-color: var(--color-err);
      &:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-err), transparent 85%); }
    }
    &[st="suc"] {
      border-color: var(--color-suc);
      &:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-suc), transparent 85%); }
    }
    &[st="wrn"] {
      border-color: var(--color-wrn);
      &:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-wrn), transparent 85%); }
    }
    &[st="inf"] {
      border-color: var(--color-inf);
      &:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-inf), transparent 85%); }
    }
  }

}
}