/* ============================================================
   UTILITIES.CSS — Atomic Helpers
   PWA CSS Library by CSTRSK
   ============================================================ */

/* ── DISPLAY ────────────────────────────────────────────────── */

.block         { display: block; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }
.grid-display  { display: grid; }
.hidden        { display: none !important; }
.invisible     { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── POSITION ───────────────────────────────────────────────── */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0 { inset: 0; }
.top-0   { top: 0; }
.bottom-0{ bottom: 0; }
.left-0  { left: 0; }
.right-0 { right: 0; }

/* ── OVERFLOW ───────────────────────────────────────────────── */

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-scroll { overflow: scroll; -webkit-overflow-scrolling: touch; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1    { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2    { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3    { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── WIDTH / HEIGHT ─────────────────────────────────────────── */

.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.h-auto  { height: auto; }
.h-screen{ height: 100svh; }

.max-w-xs  { max-width: 320px; }
.max-w-sm  { max-width: 480px; }
.max-w-md  { max-width: 640px; }
.max-w-lg  { max-width: 768px; }
.max-w-xl  { max-width: 1024px; }
.max-w-full{ max-width: 100%; }

.min-h-tap { min-height: var(--tap-min); }

/* ── SPACING — MARGIN ───────────────────────────────────────── */

.m-0  { margin: var(--space-0); }
.m-2  { margin: var(--space-2); }
.m-4  { margin: var(--space-4); }
.m-auto{ margin: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.mt-0 { margin-top: var(--space-0); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* ── SPACING — PADDING ──────────────────────────────────────── */

.p-0  { padding: var(--space-0); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ── TYPOGRAPHY UTILITIES ────────────────────────────────────── */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize{ text-transform: capitalize; }

.italic  { font-style: italic; }
.underline { text-decoration: underline; }
.no-underline{ text-decoration: none; }

/* ── COLOR UTILITIES ─────────────────────────────────────────── */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-brand     { color: var(--text-brand); }
.text-accent    { color: var(--text-accent); }
.text-inverse   { color: var(--text-inverse); }
.text-error     { color: var(--color-error); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }

.bg-base    { background: var(--bg-base); }
.bg-surface { background: var(--bg-surface); }
.bg-subtle  { background: var(--bg-subtle); }
.bg-brand   { background: var(--interactive-primary); }

/* ── BORDER ──────────────────────────────────────────────────── */

.border       { border: 1px solid var(--border-default); }
.border-top   { border-top: 1px solid var(--border-default); }
.border-bottom{ border-bottom: 1px solid var(--border-default); }
.border-none  { border: none; }

.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── SHADOW ──────────────────────────────────────────────────── */

.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }

/* ── OPACITY ─────────────────────────────────────────────────── */

.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ── CURSOR / POINTER ────────────────────────────────────────── */

.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }

/* ── INTERACTION ─────────────────────────────────────────────── */

.no-tap-highlight { -webkit-tap-highlight-color: transparent; }
.no-select        { user-select: none; -webkit-user-select: none; }

/* ── ANIMATIONS ──────────────────────────────────────────────── */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slide-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes scale-in {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.animate-spin       { animation: spin 1s linear infinite; }
.animate-ping       { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }
.animate-pulse      { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }
.animate-bounce     { animation: bounce 1s infinite; }
.animate-fade-in    { animation: fade-in var(--duration-normal) var(--ease-default) both; }
.animate-slide-up   { animation: slide-up var(--duration-normal) var(--ease-spring) both; }
.animate-slide-down { animation: slide-down var(--duration-normal) var(--ease-spring) both; }
.animate-scale-in   { animation: scale-in var(--duration-normal) var(--ease-spring) both; }

/* Stagger children */
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 60ms; }
.stagger > *:nth-child(3)  { animation-delay: 120ms; }
.stagger > *:nth-child(4)  { animation-delay: 180ms; }
.stagger > *:nth-child(5)  { animation-delay: 240ms; }
.stagger > *:nth-child(6)  { animation-delay: 300ms; }

/* ── GRADIENTS ───────────────────────────────────────────────── */

.gradient-brand {
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700));
}

.gradient-accent {
  background: linear-gradient(135deg, var(--color-accent-400), var(--color-brand-500));
}

.gradient-dark {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
}

.gradient-light {
  background: linear-gradient(180deg, transparent 0%, var(--bg-base) 100%);
}

/* Text gradient */
.text-gradient {
  background: linear-gradient(135deg, var(--color-brand-500), var(--color-accent-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── FOCUS RING ──────────────────────────────────────────────── */

.focus-ring:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ── OBJECT FIT ──────────────────────────────────────────────── */

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill    { object-fit: fill; }

/* ── ASPECT RATIO ────────────────────────────────────────────── */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-4-3    { aspect-ratio: 4 / 3; }
.aspect-3-4    { aspect-ratio: 3 / 4; }

/* ── Z-INDEX ─────────────────────────────────────────────────── */

.z-0   { z-index: var(--z-base); }
.z-10  { z-index: 10; }
.z-dropdown { z-index: var(--z-dropdown); }
.z-modal    { z-index: var(--z-modal); }
.z-toast    { z-index: var(--z-toast); }