/* ==========================================================
   ACENTEDESTEK V2 — UTILITY CLASSES
   Minimal, composable utilities. Prefix: ads-
   ========================================================== */

/* — Display — */
.ads-hidden    { display: none !important; }
.ads-block     { display: block; }
.ads-inline    { display: inline; }
.ads-flex      { display: flex; }
.ads-inline-flex { display: inline-flex; }
.ads-grid      { display: grid; }

/* — Flex — */
.ads-flex-col     { flex-direction: column; }
.ads-flex-row     { flex-direction: row; }
.ads-flex-wrap    { flex-wrap: wrap; }
.ads-items-start  { align-items: flex-start; }
.ads-items-center { align-items: center; }
.ads-items-end    { align-items: flex-end; }
.ads-items-stretch { align-items: stretch; }
.ads-justify-start   { justify-content: flex-start; }
.ads-justify-center  { justify-content: center; }
.ads-justify-end     { justify-content: flex-end; }
.ads-justify-between { justify-content: space-between; }
.ads-flex-1 { flex: 1 1 0%; }
.ads-flex-none { flex: none; }
.ads-flex-shrink-0 { flex-shrink: 0; }

/* — Gap — */
.ads-gap-0    { gap: 0; }
.ads-gap-0\.5 { gap: var(--ads-sp-0\.5); }
.ads-gap-1    { gap: var(--ads-sp-1); }
.ads-gap-1\.5 { gap: var(--ads-sp-1\.5); }
.ads-gap-2    { gap: var(--ads-sp-2); }
.ads-gap-3    { gap: var(--ads-sp-3); }
.ads-gap-4    { gap: var(--ads-sp-4); }
.ads-gap-5    { gap: var(--ads-sp-5); }
.ads-gap-6    { gap: var(--ads-sp-6); }
.ads-gap-8    { gap: var(--ads-sp-8); }

/* — Padding — */
.ads-p-0  { padding: 0; }
.ads-p-1  { padding: var(--ads-sp-1); }
.ads-p-2  { padding: var(--ads-sp-2); }
.ads-p-3  { padding: var(--ads-sp-3); }
.ads-p-4  { padding: var(--ads-sp-4); }
.ads-p-5  { padding: var(--ads-sp-5); }
.ads-p-6  { padding: var(--ads-sp-6); }
.ads-p-8  { padding: var(--ads-sp-8); }
.ads-px-2 { padding-left: var(--ads-sp-2); padding-right: var(--ads-sp-2); }
.ads-px-3 { padding-left: var(--ads-sp-3); padding-right: var(--ads-sp-3); }
.ads-px-4 { padding-left: var(--ads-sp-4); padding-right: var(--ads-sp-4); }
.ads-px-5 { padding-left: var(--ads-sp-5); padding-right: var(--ads-sp-5); }
.ads-px-6 { padding-left: var(--ads-sp-6); padding-right: var(--ads-sp-6); }
.ads-py-2 { padding-top: var(--ads-sp-2); padding-bottom: var(--ads-sp-2); }
.ads-py-3 { padding-top: var(--ads-sp-3); padding-bottom: var(--ads-sp-3); }
.ads-py-4 { padding-top: var(--ads-sp-4); padding-bottom: var(--ads-sp-4); }
.ads-py-5 { padding-top: var(--ads-sp-5); padding-bottom: var(--ads-sp-5); }
.ads-py-6 { padding-top: var(--ads-sp-6); padding-bottom: var(--ads-sp-6); }
.ads-pt-4 { padding-top: var(--ads-sp-4); }
.ads-pb-4 { padding-bottom: var(--ads-sp-4); }

/* — Margin — */
.ads-m-0  { margin: 0; }
.ads-m-auto { margin: auto; }
.ads-mx-auto { margin-left: auto; margin-right: auto; }
.ads-ml-auto { margin-left: auto; }
.ads-mr-auto { margin-right: auto; }
.ads-mt-1 { margin-top: var(--ads-sp-1); }
.ads-mt-2 { margin-top: var(--ads-sp-2); }
.ads-mt-3 { margin-top: var(--ads-sp-3); }
.ads-mt-4 { margin-top: var(--ads-sp-4); }
.ads-mt-6 { margin-top: var(--ads-sp-6); }
.ads-mt-8 { margin-top: var(--ads-sp-8); }
.ads-mb-1 { margin-bottom: var(--ads-sp-1); }
.ads-mb-2 { margin-bottom: var(--ads-sp-2); }
.ads-mb-3 { margin-bottom: var(--ads-sp-3); }
.ads-mb-4 { margin-bottom: var(--ads-sp-4); }
.ads-mb-6 { margin-bottom: var(--ads-sp-6); }

/* — Width/Height — */
.ads-w-full  { width: 100%; }
.ads-w-auto  { width: auto; }
.ads-h-full  { height: 100%; }
.ads-h-screen { height: 100vh; }
.ads-min-h-screen { min-height: 100vh; }
.ads-max-w-xs   { max-width: 320px; }
.ads-max-w-sm   { max-width: 384px; }
.ads-max-w-md   { max-width: 448px; }
.ads-max-w-lg   { max-width: 540px; }
.ads-max-w-xl   { max-width: 720px; }
.ads-max-w-2xl  { max-width: 960px; }
.ads-max-w-content { max-width: var(--ads-content-max); }

/* — Text — */
.ads-text-xs   { font-size: var(--ads-text-xs); }
.ads-text-sm   { font-size: var(--ads-text-sm); }
.ads-text-base { font-size: var(--ads-text-base); }
.ads-text-md   { font-size: var(--ads-text-md); }
.ads-text-lg   { font-size: var(--ads-text-lg); }
.ads-text-xl   { font-size: var(--ads-text-xl); }
.ads-text-2xl  { font-size: var(--ads-text-2xl); }
.ads-text-3xl  { font-size: var(--ads-text-3xl); }
.ads-text-4xl  { font-size: var(--ads-text-4xl); }
.ads-font-normal   { font-weight: 400; }
.ads-font-medium   { font-weight: 500; }
.ads-font-semibold { font-weight: 600; }
.ads-font-bold     { font-weight: 700; }
.ads-font-black    { font-weight: 900; }
.ads-leading-tight { line-height: var(--ads-lh-tight); }
.ads-leading-snug  { line-height: var(--ads-lh-snug); }
.ads-tracking-tight  { letter-spacing: -0.02em; }
.ads-tracking-tighter { letter-spacing: -0.04em; }
.ads-tracking-wide   { letter-spacing: 0.06em; }
.ads-uppercase { text-transform: uppercase; }
.ads-lowercase { text-transform: lowercase; }
.ads-capitalize { text-transform: capitalize; }
.ads-text-center { text-align: center; }
.ads-text-right  { text-align: right; }
.ads-text-left   { text-align: left; }
.ads-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ads-whitespace-nowrap { white-space: nowrap; }

/* — Colors — */
.ads-text-primary   { color: var(--ads-primary); }
.ads-text-secondary { color: var(--ads-text-secondary); }
.ads-text-muted     { color: var(--ads-text-muted); }
.ads-text-disabled  { color: var(--ads-text-disabled); }
.ads-text-success   { color: var(--ads-success); }
.ads-text-danger    { color: var(--ads-danger); }
.ads-text-warning   { color: var(--ads-warning); }
.ads-text-info      { color: var(--ads-info); }
.ads-text-inverse   { color: var(--ads-text-inverse); }

.ads-bg-primary   { background: var(--ads-primary); }
.ads-bg-surface   { background: var(--ads-surface); }
.ads-bg-alt       { background: var(--ads-bg-alt); }
.ads-bg-subtle    { background: var(--ads-bg-subtle); }

/* — Border — */
.ads-border       { border: 1px solid var(--ads-border); }
.ads-border-b     { border-bottom: 1px solid var(--ads-border); }
.ads-border-t     { border-top: 1px solid var(--ads-border); }
.ads-border-strong { border: 1px solid var(--ads-border-strong); }
.ads-border-none  { border: none; }
.ads-rounded      { border-radius: var(--ads-radius); }
.ads-rounded-lg   { border-radius: var(--ads-radius-lg); }
.ads-rounded-xl   { border-radius: var(--ads-radius-xl); }
.ads-rounded-2xl  { border-radius: var(--ads-radius-2xl); }
.ads-rounded-full { border-radius: var(--ads-radius-full); }

/* — Shadow — */
.ads-shadow-none { box-shadow: none; }
.ads-shadow-xs   { box-shadow: var(--ads-shadow-xs); }
.ads-shadow-sm   { box-shadow: var(--ads-shadow-sm); }
.ads-shadow      { box-shadow: var(--ads-shadow); }
.ads-shadow-md   { box-shadow: var(--ads-shadow-md); }
.ads-shadow-lg   { box-shadow: var(--ads-shadow-lg); }

/* — Overflow — */
.ads-overflow-hidden { overflow: hidden; }
.ads-overflow-auto   { overflow: auto; }
.ads-overflow-x-auto { overflow-x: auto; }

/* — Position — */
.ads-relative { position: relative; }
.ads-absolute { position: absolute; }
.ads-fixed    { position: fixed; }
.ads-sticky   { position: sticky; }
.ads-inset-0  { inset: 0; }
.ads-top-0    { top: 0; }

/* — Cursor — */
.ads-cursor-pointer  { cursor: pointer; }
.ads-cursor-default  { cursor: default; }
.ads-pointer-events-none { pointer-events: none; }

/* — Opacity — */
.ads-opacity-0   { opacity: 0; }
.ads-opacity-50  { opacity: 0.5; }
.ads-opacity-100 { opacity: 1; }

/* — Transitions — */
.ads-transition { transition: all var(--ads-dur) var(--ads-ease); }
.ads-transition-fast { transition: all var(--ads-dur-fast) var(--ads-ease); }
.ads-transition-slow { transition: all var(--ads-dur-slow) var(--ads-ease); }

/* — Animations — */
.ads-animate-in { animation: adsFadeUp var(--ads-dur-slow) var(--ads-ease); }
.ads-animate-fade { animation: adsFadeIn var(--ads-dur) var(--ads-ease) both; }
.ads-stagger-1 { animation-delay: 50ms; }
.ads-stagger-2 { animation-delay: 100ms; }
.ads-stagger-3 { animation-delay: 150ms; }
.ads-stagger-4 { animation-delay: 200ms; }
.ads-stagger-5 { animation-delay: 250ms; }
.ads-stagger-6 { animation-delay: 300ms; }

/* — Selection — */
.ads-select-none { user-select: none; }
.ads-select-all  { user-select: all; }

/* — Scrollbar (thin, subtle) — */
.ads-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--ads-border-strong) transparent;
}
.ads-scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.ads-scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.ads-scrollbar-thin::-webkit-scrollbar-thumb { background: var(--ads-border-strong); border-radius: 999px; }

/* ===== RESPONSIVE ===== */
@media (min-width: 640px) {
  .sm\:ads-flex { display: flex; }
  .sm\:ads-hidden { display: none !important; }
  .sm\:ads-grid { display: grid; }
  .sm\:ads-block { display: block; }
  .sm\:ads-flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:ads-flex { display: flex; }
  .md\:ads-hidden { display: none !important; }
  .md\:ads-grid { display: grid; }
  .md\:ads-block { display: block; }
  .md\:ads-flex-row { flex-direction: row; }
  .md\:ads-gap-6 { gap: var(--ads-sp-6); }
}
/* — Skeleton / shimmer loading state — */
@keyframes ads-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.sk-pulse,
.sk-line,
.sk-box {
  background: linear-gradient(
    90deg,
    var(--ads-border) 25%,
    var(--ads-bg)     50%,
    var(--ads-border) 75%
  );
  background-size: 1200px 100%;
  animation: ads-shimmer 1.4s infinite linear;
  border-radius: var(--ads-radius);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.sk-line {
  display: inline-block;
  height: 0.85em;
  vertical-align: middle;
}
.sk-box {
  display: block;
  border-radius: var(--ads-radius);
}

@media (min-width: 1024px) {
  .lg\:ads-flex { display: flex; }
  .lg\:ads-hidden { display: none !important; }
  .lg\:ads-grid { display: grid; }
  .lg\:ads-block { display: block; }
  .lg\:ads-flex-row { flex-direction: row; }
  .lg\:ads-gap-8 { gap: var(--ads-sp-8); }
}