/* ============================================
   Utility Classes
   ============================================
   This file loads LAST so utilities always beat
   component styles at equal specificity.
   :root variables live in style.css.
   ============================================ */

/* ---- Padding ---- */
.padding-5xs { padding: var(--space-5xs); }
.padding-4xs { padding: var(--space-4xs); }
.padding-3xs { padding: var(--space-3xs); }
.padding-2xs { padding: var(--space-2xs); }
.padding-xs  { padding: var(--space-xs); }
.padding-s   { padding: var(--space-s); }
.padding-m   { padding: var(--space-m); }
.padding-l   { padding: var(--space-l); }
.padding-xl  { padding: var(--space-xl); }
.padding-2xl { padding: var(--space-2xl); }
.padding-3xl { padding: var(--space-3xl); }
.padding-4xl { padding: var(--space-4xl); }
.padding-5xl { padding: var(--space-5xl); }

.padding-left-5xs { padding-left: var(--space-5xs); }
.padding-left-4xs { padding-left: var(--space-4xs); }
.padding-left-3xs { padding-left: var(--space-3xs); }
.padding-left-2xs { padding-left: var(--space-2xs); }
.padding-left-xs  { padding-left: var(--space-xs); }
.padding-left-s   { padding-left: var(--space-s); }
.padding-left-m   { padding-left: var(--space-m); }
.padding-left-l   { padding-left: var(--space-l); }
.padding-left-xl  { padding-left: var(--space-xl); }
.padding-left-2xl { padding-left: var(--space-2xl); }
.padding-left-3xl { padding-left: var(--space-3xl); }
.padding-left-4xl { padding-left: var(--space-4xl); }
.padding-left-5xl { padding-left: var(--space-5xl); }

.padding-right-5xs { padding-right: var(--space-5xs); }
.padding-right-4xs { padding-right: var(--space-4xs); }
.padding-right-3xs { padding-right: var(--space-3xs); }
.padding-right-2xs { padding-right: var(--space-2xs); }
.padding-right-xs  { padding-right: var(--space-xs); }
.padding-right-s   { padding-right: var(--space-s); }
.padding-right-m   { padding-right: var(--space-m); }
.padding-right-l   { padding-right: var(--space-l); }
.padding-right-xl  { padding-right: var(--space-xl); }
.padding-right-2xl { padding-right: var(--space-2xl); }
.padding-right-3xl { padding-right: var(--space-3xl); }
.padding-right-4xl { padding-right: var(--space-4xl); }
.padding-right-5xl { padding-right: var(--space-5xl); }

.padding-top-5xs { padding-top: var(--space-5xs); }
.padding-top-4xs { padding-top: var(--space-4xs); }
.padding-top-3xs { padding-top: var(--space-3xs); }
.padding-top-2xs { padding-top: var(--space-2xs); }
.padding-top-xs  { padding-top: var(--space-xs); }
.padding-top-s   { padding-top: var(--space-s); }
.padding-top-m   { padding-top: var(--space-m); }
.padding-top-l   { padding-top: var(--space-l); }
.padding-top-xl  { padding-top: var(--space-xl); }
.padding-top-2xl { padding-top: var(--space-2xl); }
.padding-top-3xl { padding-top: var(--space-3xl); }
.padding-top-4xl { padding-top: var(--space-4xl); }
.padding-top-5xl { padding-top: var(--space-5xl); }

.padding-bottom-5xs { padding-bottom: var(--space-5xs); }
.padding-bottom-4xs { padding-bottom: var(--space-4xs); }
.padding-bottom-3xs { padding-bottom: var(--space-3xs); }
.padding-bottom-2xs { padding-bottom: var(--space-2xs); }
.padding-bottom-xs  { padding-bottom: var(--space-xs); }
.padding-bottom-s   { padding-bottom: var(--space-s); }
.padding-bottom-m   { padding-bottom: var(--space-m); }
.padding-bottom-l   { padding-bottom: var(--space-l); }
.padding-bottom-xl  { padding-bottom: var(--space-xl); }
.padding-bottom-2xl { padding-bottom: var(--space-2xl); }
.padding-bottom-3xl { padding-bottom: var(--space-3xl); }
.padding-bottom-4xl { padding-bottom: var(--space-4xl); }
.padding-bottom-5xl { padding-bottom: var(--space-5xl); }

.padding-horizontal-5xs { padding-left: var(--space-5xs); padding-right: var(--space-5xs); }
.padding-horizontal-4xs { padding-left: var(--space-4xs); padding-right: var(--space-4xs); }
.padding-horizontal-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.padding-horizontal-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.padding-horizontal-xs  { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
.padding-horizontal-s   { padding-left: var(--space-s);   padding-right: var(--space-s); }
.padding-horizontal-m   { padding-left: var(--space-m);   padding-right: var(--space-m); }
.padding-horizontal-l   { padding-left: var(--space-l);   padding-right: var(--space-l); }
.padding-horizontal-xl  { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
.padding-horizontal-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.padding-horizontal-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); }
.padding-horizontal-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); }
.padding-horizontal-5xl { padding-left: var(--space-5xl); padding-right: var(--space-5xl); }

.padding-vertical-5xs { padding-top: var(--space-5xs); padding-bottom: var(--space-5xs); }
.padding-vertical-4xs { padding-top: var(--space-4xs); padding-bottom: var(--space-4xs); }
.padding-vertical-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.padding-vertical-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.padding-vertical-xs  { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
.padding-vertical-s   { padding-top: var(--space-s);   padding-bottom: var(--space-s); }
.padding-vertical-m   { padding-top: var(--space-m);   padding-bottom: var(--space-m); }
.padding-vertical-l   { padding-top: var(--space-l);   padding-bottom: var(--space-l); }
.padding-vertical-xl  { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
.padding-vertical-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.padding-vertical-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.padding-vertical-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); }
.padding-vertical-5xl { padding-top: var(--space-5xl); padding-bottom: var(--space-5xl); }

/* ---- Margin ---- */
.margin-5xs { margin: var(--space-5xs); }
.margin-4xs { margin: var(--space-4xs); }
.margin-3xs { margin: var(--space-3xs); }
.margin-2xs { margin: var(--space-2xs); }
.margin-xs  { margin: var(--space-xs); }
.margin-s   { margin: var(--space-s); }
.margin-m   { margin: var(--space-m); }
.margin-l   { margin: var(--space-l); }
.margin-xl  { margin: var(--space-xl); }
.margin-2xl { margin: var(--space-2xl); }
.margin-3xl { margin: var(--space-3xl); }
.margin-4xl { margin: var(--space-4xl); }
.margin-5xl { margin: var(--space-5xl); }

.margin-left-5xs { margin-left: var(--space-5xs); }
.margin-left-4xs { margin-left: var(--space-4xs); }
.margin-left-3xs { margin-left: var(--space-3xs); }
.margin-left-2xs { margin-left: var(--space-2xs); }
.margin-left-xs  { margin-left: var(--space-xs); }
.margin-left-s   { margin-left: var(--space-s); }
.margin-left-m   { margin-left: var(--space-m); }
.margin-left-l   { margin-left: var(--space-l); }
.margin-left-xl  { margin-left: var(--space-xl); }
.margin-left-2xl { margin-left: var(--space-2xl); }
.margin-left-3xl { margin-left: var(--space-3xl); }
.margin-left-4xl { margin-left: var(--space-4xl); }
.margin-left-5xl { margin-left: var(--space-5xl); }

.margin-right-5xs { margin-right: var(--space-5xs); }
.margin-right-4xs { margin-right: var(--space-4xs); }
.margin-right-3xs { margin-right: var(--space-3xs); }
.margin-right-2xs { margin-right: var(--space-2xs); }
.margin-right-xs  { margin-right: var(--space-xs); }
.margin-right-s   { margin-right: var(--space-s); }
.margin-right-m   { margin-right: var(--space-m); }
.margin-right-l   { margin-right: var(--space-l); }
.margin-right-xl  { margin-right: var(--space-xl); }
.margin-right-2xl { margin-right: var(--space-2xl); }
.margin-right-3xl { margin-right: var(--space-3xl); }
.margin-right-4xl { margin-right: var(--space-4xl); }
.margin-right-5xl { margin-right: var(--space-5xl); }

.margin-top-5xs { margin-top: var(--space-5xs); }
.margin-top-4xs { margin-top: var(--space-4xs); }
.margin-top-3xs { margin-top: var(--space-3xs); }
.margin-top-2xs { margin-top: var(--space-2xs); }
.margin-top-xs  { margin-top: var(--space-xs); }
.margin-top-s   { margin-top: var(--space-s); }
.margin-top-m   { margin-top: var(--space-m); }
.margin-top-l   { margin-top: var(--space-l); }
.margin-top-xl  { margin-top: var(--space-xl); }
.margin-top-2xl { margin-top: var(--space-2xl); }
.margin-top-3xl { margin-top: var(--space-3xl); }
.margin-top-4xl { margin-top: var(--space-4xl); }
.margin-top-5xl { margin-top: var(--space-5xl); }

.margin-bottom-5xs { margin-bottom: var(--space-5xs); }
.margin-bottom-4xs { margin-bottom: var(--space-4xs); }
.margin-bottom-3xs { margin-bottom: var(--space-3xs); }
.margin-bottom-2xs { margin-bottom: var(--space-2xs); }
.margin-bottom-xs  { margin-bottom: var(--space-xs); }
.margin-bottom-s   { margin-bottom: var(--space-s); }
.margin-bottom-m   { margin-bottom: var(--space-m); }
.margin-bottom-l   { margin-bottom: var(--space-l); }
.margin-bottom-xl  { margin-bottom: var(--space-xl); }
.margin-bottom-2xl { margin-bottom: var(--space-2xl); }
.margin-bottom-3xl { margin-bottom: var(--space-3xl); }
.margin-bottom-4xl { margin-bottom: var(--space-4xl); }
.margin-bottom-5xl { margin-bottom: var(--space-5xl); }

.margin-horizontal-5xs { margin-left: var(--space-5xs); margin-right: var(--space-5xs); }
.margin-horizontal-4xs { margin-left: var(--space-4xs); margin-right: var(--space-4xs); }
.margin-horizontal-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); }
.margin-horizontal-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.margin-horizontal-xs  { margin-left: var(--space-xs);  margin-right: var(--space-xs); }
.margin-horizontal-s   { margin-left: var(--space-s);   margin-right: var(--space-s); }
.margin-horizontal-m   { margin-left: var(--space-m);   margin-right: var(--space-m); }
.margin-horizontal-l   { margin-left: var(--space-l);   margin-right: var(--space-l); }
.margin-horizontal-xl  { margin-left: var(--space-xl);  margin-right: var(--space-xl); }
.margin-horizontal-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.margin-horizontal-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); }
.margin-horizontal-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); }
.margin-horizontal-5xl { margin-left: var(--space-5xl); margin-right: var(--space-5xl); }

.margin-vertical-5xs { margin-top: var(--space-5xs); margin-bottom: var(--space-5xs); }
.margin-vertical-4xs { margin-top: var(--space-4xs); margin-bottom: var(--space-4xs); }
.margin-vertical-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }
.margin-vertical-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.margin-vertical-xs  { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
.margin-vertical-s   { margin-top: var(--space-s);   margin-bottom: var(--space-s); }
.margin-vertical-m   { margin-top: var(--space-m);   margin-bottom: var(--space-m); }
.margin-vertical-l   { margin-top: var(--space-l);   margin-bottom: var(--space-l); }
.margin-vertical-xl  { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
.margin-vertical-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }
.margin-vertical-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); }
.margin-vertical-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); }
.margin-vertical-5xl { margin-top: var(--space-5xl); margin-bottom: var(--space-5xl); }

/* ---- Gap ---- */
.gap-5xs { gap: var(--space-5xs); }
.gap-4xs { gap: var(--space-4xs); }
.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-s   { gap: var(--space-s); }
.gap-m   { gap: var(--space-m); }
.gap-l   { gap: var(--space-l); }
.gap-xl  { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }
.gap-4xl { gap: var(--space-4xl); }
.gap-5xl { gap: var(--space-5xl); }

/* ---- Font Size ---- */
.text-5xs { font-size: var(--text-5xs); }
.text-4xs { font-size: var(--text-4xs); }
.text-3xs { font-size: var(--text-3xs); }
.text-2xs { font-size: var(--text-2xs); }
.text-xs  { font-size: var(--text-xs); }
.text-s   { font-size: var(--text-s); }
.text-m   { font-size: var(--text-m); }
.text-l   { font-size: var(--text-l); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* ---- Line Height ---- */
.line-height-xs { line-height: 1; }
.line-height-s  { line-height: 1.2; }
.line-height-m  { line-height: 1.3; }
.line-height-l  { line-height: 1.4; }
.line-height-xl { line-height: 1.5; }

/* ---- Font Weight ---- */
.font-100 { font-weight: 100; }
.font-200 { font-weight: 200; }
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }
.font-900 { font-weight: 900; }

/* ---- Text Style ---- */
.italic    { font-style: italic; }
.bold      { font-weight: bold; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.underline { text-decoration: underline; }

/* ---- Text Alignment ---- */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* ---- Grid Layout ---- */
.row    { display: grid; grid-auto-flow: column; justify-content: start; }
.column { display: grid; grid-auto-flow: row; justify-items: start; align-content: start; }

.columns-2 { display: grid; grid-template-columns: var(--columns-2); }
.columns-3 { display: grid; grid-template-columns: var(--columns-3); }
.columns-4 { display: grid; grid-template-columns: var(--columns-4); }
.columns-5 { display: grid; grid-template-columns: var(--columns-5); }
.columns-6 { display: grid; grid-template-columns: var(--columns-6); }
.columns-7 { display: grid; grid-template-columns: var(--columns-7); }
.columns-8 { display: grid; grid-template-columns: var(--columns-8); }

.columns-min-5  { display: grid; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
.columns-min-10 { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.columns-min-20 { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.columns-min-30 { display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); }
.columns-min-40 { display: grid; grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr)); }
.columns-min-50 { display: grid; grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr)); }
.columns-min-60 { display: grid; grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr)); }
.columns-min-70 { display: grid; grid-template-columns: repeat(auto-fit, minmax(70rem, 1fr)); }

/* ---- Flex ---- */
.flex-row    { display: flex; flex-direction: row; }
.flex-column { display: flex; flex-direction: column; }
.flex-1      { flex: 1; }
.flex-2      { flex: 2; }
.flex-3      { flex: 3; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* ---- Grid Span & Start ---- */
.col-span-2 { grid-column: auto / span 2; }
.col-span-3 { grid-column: auto / span 3; }
.col-span-4 { grid-column: auto / span 4; }
.col-span-5 { grid-column: auto / span 5; }
.col-span-6 { grid-column: auto / span 6; }
.col-span-7 { grid-column: auto / span 7; }
.col-span-8 { grid-column: auto / span 8; }

.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }

.row-span-2 { grid-row: auto / span 2; }
.row-span-3 { grid-row: auto / span 3; }
.row-span-4 { grid-row: auto / span 4; }
.row-span-5 { grid-row: auto / span 5; }
.row-span-6 { grid-row: auto / span 6; }
.row-span-7 { grid-row: auto / span 7; }
.row-span-8 { grid-row: auto / span 8; }

.row-start-1 { grid-row-start: 1; }
.row-start-2 { grid-row-start: 2; }
.row-start-3 { grid-row-start: 3; }
.row-start-4 { grid-row-start: 4; }
.row-start-5 { grid-row-start: 5; }
.row-start-6 { grid-row-start: 6; }
.row-start-7 { grid-row-start: 7; }
.row-start-8 { grid-row-start: 8; }

/* ---- Alignment ---- */
.items-left      { justify-items: start; }
.content-left    { justify-content: start; }
.items-center    { justify-items: center; }
.content-center  { justify-content: center; }
.items-right     { justify-items: end; }
.content-right   { justify-content: end; }
.items-top       { align-items: start; }
.content-top     { align-content: start; }
.items-middle    { align-items: center; }
.content-middle  { align-content: center; }
.items-bottom    { align-items: end; }
.content-bottom  { align-content: end; }
.items-stretch   { align-items: stretch; }
.content-stretch { justify-content: stretch; }
.space-between   { justify-content: space-between; }
.space-around    { justify-content: space-around; }

.self-left    { margin-right: auto;  place-self: start; }
.self-center  { margin-inline: auto; place-self: center; }
.self-right   { margin-left: auto;   place-self: end; }
.self-top     { margin-bottom: auto; align-self: start; }
.self-middle  { margin-block: auto;  align-self: center; }
.self-bottom  { margin-top: auto;    align-self: end; }
.self-stretch { align-self: stretch; }

/* ---- Sizing ---- */
.full-width    { width: 100%; }
.full-height   { height: 100%; }
.screen-width  { width: 100vw; }
.screen-height { height: 100vh; }
.auto-width    { width: auto; }
.auto-height   { height: auto; }

.width-90 { width: 90%; }
.width-80 { width: 80%; }
.width-70 { width: 70%; }
.width-60 { width: 60%; }
.width-50 { width: 50%; }
.width-40 { width: 40%; }
.width-30 { width: 30%; }
.width-20 { width: 20%; }
.width-10 { width: 10%; }

.max-screen-width { max-width: var(--max-screen-width); width: 100%; }
.max-width-140  { max-width: 140rem; }
.max-width-130  { max-width: 130rem; }
.max-width-120  { max-width: 120rem; }
.max-width-110  { max-width: 110rem; }
.max-width-100  { max-width: 100rem; }
.max-width-90   { max-width: 90rem; }
.max-width-80   { max-width: 80rem; }
.max-width-70   { max-width: 70rem; }
.max-width-60   { max-width: 60rem; }
.max-width-50   { max-width: 50rem; }
.max-width-40   { max-width: 40rem; }
.max-width-30   { max-width: 30rem; }
.max-width-20   { max-width: 20rem; }
.max-width-10   { max-width: 10rem; }

/* ---- Radius ---- */
.radius-xs   { border-radius: var(--radius-xs); }
.radius-s    { border-radius: var(--radius-s); }
.radius-m    { border-radius: var(--radius-m); }
.radius-l    { border-radius: var(--radius-l); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* ---- Border ---- */
.border        { border-width: 1px; border-style: solid; }
.border-left   { border-left-width: 1px; border-left-style: solid; }
.border-right  { border-right-width: 1px; border-right-style: solid; }
.border-top    { border-top-width: 1px; border-top-style: solid; }
.border-bottom { border-bottom-width: 1px; border-bottom-style: solid; }
.border-thin   { border-width: 0.5px; border-style: solid; }

/* ---- Shadow ---- */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-s  { box-shadow: var(--shadow-s); }
.shadow-m  { box-shadow: var(--shadow-m); }
.shadow-l  { box-shadow: var(--shadow-l); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ---- Opacity ---- */
.opacity-0   { opacity: 0; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ---- Aspect Ratio ---- */
.aspect-1    { aspect-ratio: 1; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-3-4  { aspect-ratio: 3 / 4; }
.aspect-3-2  { aspect-ratio: 3 / 2; }
.aspect-2-3  { aspect-ratio: 2 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-9-16 { aspect-ratio: 9 / 16; }

/* ---- Object Fit ---- */
.fit-contain { object-fit: contain; }
.fit-cover   { object-fit: cover; }
.fit-fill    { object-fit: fill; }
.fit-none    { object-fit: none; }

/* ---- Backdrop Blur ---- */
.bg-blur-xs { backdrop-filter: blur(2px); }
.bg-blur-s  { backdrop-filter: blur(4px); }
.bg-blur-m  { backdrop-filter: blur(8px); }
.bg-blur-l  { backdrop-filter: blur(16px); }
.bg-blur-xl { backdrop-filter: blur(32px); }

/* ---- Filters & Transform ---- */
.grayscale  { filter: grayscale(1); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* ---- Display & Visibility ---- */
.display-none { display: none; }
.visible      { visibility: visible; }
.hidden       { visibility: hidden; }

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

/* ---- Misc ---- */
.list-none          { list-style-type: none; }
.white-space-nowrap { white-space: nowrap; }
.transition-global  { transition: all 0.3s; }

/* ---- Position ---- */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.fixed    { position: fixed; }

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

/* ---- Cursor ---- */
.pointer           { cursor: pointer; }
.not-allowed       { cursor: not-allowed; }
.cursor-auto       { cursor: auto; }
.no-pointer-events { pointer-events: none; }

/* ---- Z-Index ---- */
.z--1    { z-index: -1; }
.z-0     { z-index: 0; }
.z-1     { z-index: 1; }
.z-10    { z-index: 10; }
.z-100   { z-index: 100; }
.z-1000  { z-index: 1000; }
.z-10000 { z-index: 10000; }


/* ============================================
   Responsive Variants
   ============================================ */

/* ---- L (max-width: 1024px) ---- */
@media (max-width: 1024px) {
  .column--on-l { grid-template-columns: 1fr; grid-auto-flow: row; }
  .row--on-l    { grid-template-columns: unset; grid-auto-flow: column; }

  .columns-2--on-l { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-l { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-l { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-l { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-l { grid-template-columns: repeat(6, 1fr); }

  .col-span-1--on-l { grid-column: auto / span 1; }
  .col-span-2--on-l { grid-column: auto / span 2; }
  .col-span-3--on-l { grid-column: auto / span 3; }
  .col-span-4--on-l { grid-column: auto / span 4; }
  .col-span-5--on-l { grid-column: auto / span 5; }
  .col-span-6--on-l { grid-column: auto / span 6; }

  .col-start-1--on-l { grid-column-start: 1; }
  .col-start-2--on-l { grid-column-start: 2; }
  .col-start-3--on-l { grid-column-start: 3; }
  .col-start-4--on-l { grid-column-start: 4; }
  .col-start-5--on-l { grid-column-start: 5; }
  .col-start-6--on-l { grid-column-start: 6; }

  .row-span-1--on-l { grid-row: auto / span 1; }
  .row-span-2--on-l { grid-row: auto / span 2; }
  .row-span-3--on-l { grid-row: auto / span 3; }
  .row-span-4--on-l { grid-row: auto / span 4; }
  .row-span-5--on-l { grid-row: auto / span 5; }
  .row-span-6--on-l { grid-row: auto / span 6; }

  .row-start-1--on-l { grid-row-start: 1; }
  .row-start-2--on-l { grid-row-start: 2; }
  .row-start-3--on-l { grid-row-start: 3; }
  .row-start-4--on-l { grid-row-start: 4; }
  .row-start-5--on-l { grid-row-start: 5; }
  .row-start-6--on-l { grid-row-start: 6; }
}

/* ---- M (max-width: 767px) ---- */
@media (max-width: 767px) {
  .column--on-m { grid-template-columns: 1fr; grid-auto-flow: row; }
  .row--on-m    { grid-template-columns: unset; grid-auto-flow: column; }

  .columns-2--on-m { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-m { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-m { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-m { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-m { grid-template-columns: repeat(6, 1fr); }

  .col-span-1--on-m { grid-column: auto / span 1; }
  .col-span-2--on-m { grid-column: auto / span 2; }
  .col-span-3--on-m { grid-column: auto / span 3; }
  .col-span-4--on-m { grid-column: auto / span 4; }
  .col-span-5--on-m { grid-column: auto / span 5; }
  .col-span-6--on-m { grid-column: auto / span 6; }

  .col-start-1--on-m { grid-column-start: 1; }
  .col-start-2--on-m { grid-column-start: 2; }
  .col-start-3--on-m { grid-column-start: 3; }
  .col-start-4--on-m { grid-column-start: 4; }
  .col-start-5--on-m { grid-column-start: 5; }
  .col-start-6--on-m { grid-column-start: 6; }

  .row-span-1--on-m { grid-row: auto / span 1; }
  .row-span-2--on-m { grid-row: auto / span 2; }
  .row-span-3--on-m { grid-row: auto / span 3; }
  .row-span-4--on-m { grid-row: auto / span 4; }
  .row-span-5--on-m { grid-row: auto / span 5; }
  .row-span-6--on-m { grid-row: auto / span 6; }

  .row-start-1--on-m { grid-row-start: 1; }
  .row-start-2--on-m { grid-row-start: 2; }
  .row-start-3--on-m { grid-row-start: 3; }
  .row-start-4--on-m { grid-row-start: 4; }
  .row-start-5--on-m { grid-row-start: 5; }
  .row-start-6--on-m { grid-row-start: 6; }
}

/* ---- S (max-width: 478px) ---- */
@media (max-width: 478px) {
  .column--on-s { grid-template-columns: 1fr; grid-auto-flow: row; }
  .row--on-s    { grid-template-columns: 1fr; grid-auto-flow: column; }

  .columns-2--on-s { grid-template-columns: repeat(2, 1fr); }
  .columns-3--on-s { grid-template-columns: repeat(3, 1fr); }
  .columns-4--on-s { grid-template-columns: repeat(4, 1fr); }
  .columns-5--on-s { grid-template-columns: repeat(5, 1fr); }
  .columns-6--on-s { grid-template-columns: repeat(6, 1fr); }

  .col-span-1--on-s { grid-column: auto / span 1; }
  .col-span-2--on-s { grid-column: auto / span 2; }
  .col-span-3--on-s { grid-column: auto / span 3; }
  .col-span-4--on-s { grid-column: auto / span 4; }
  .col-span-5--on-s { grid-column: auto / span 5; }
  .col-span-6--on-s { grid-column: auto / span 6; }

  .col-start-1--on-s { grid-column-start: 1; }
  .col-start-2--on-s { grid-column-start: 2; }
  .col-start-3--on-s { grid-column-start: 3; }
  .col-start-4--on-s { grid-column-start: 4; }
  .col-start-5--on-s { grid-column-start: 5; }
  .col-start-6--on-s { grid-column-start: 6; }

  .row-span-1--on-s { grid-row: auto / span 1; }
  .row-span-2--on-s { grid-row: auto / span 2; }
  .row-span-3--on-s { grid-row: auto / span 3; }
  .row-span-4--on-s { grid-row: auto / span 4; }
  .row-span-5--on-s { grid-row: auto / span 5; }
  .row-span-6--on-s { grid-row: auto / span 6; }

  .row-start-1--on-s { grid-row-start: 1; }
  .row-start-2--on-s { grid-row-start: 2; }
  .row-start-3--on-s { grid-row-start: 3; }
  .row-start-4--on-s { grid-row-start: 4; }
  .row-start-5--on-s { grid-row-start: 5; }
  .row-start-6--on-s { grid-row-start: 6; }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}