/* 
 Core CSS
 Version: 1.0.2
 Last Updated: 2026-02-24
*/

/*═══════════════════════════════
	DESIGN TOKENS

	Pure CSS version — no preprocessor needed.
	All tokens live as CSS custom properties in :root.
	Change the --color-* values to retheme everything.

	Shade palettes use color-mix() (supported in all browsers since 2023).
	Surface classes use color-mix() for auto-derived text/border/hover.

	NOTE: Unlike the LESS version, CSS cannot auto-detect light vs dark
	backgrounds. Surface classes have the correct path pre-set for the
	default palette. If you change a base color dramatically (e.g. swap
	a dark color for a light one), you may need to flip the surface logic.
═══════════════════════════════*/

:root {
    --color-core: #102452;
    --color-core-mixin: #1d3c84;
    --color-bg: var(--color-core) !important;
	--title-color: white;
	--tebex-legal-footer-background-color: var(--content-900) !important;
	--tebex-legal-footer-border-color:var(--content-600) !important;
	--tebex-legal-footer-max-width:1200px;
	--page-transition-duration: 300ms;
	--background-opacity: .25;
    
	/* ── Unified fluid spacing scale ──────────
	   One scale for padding, margin, AND gap.
	   Each value auto-scales between a mobile min and desktop max.

	   Step    Mobile    Desktop
	   ──────  ────────  ─────────
	   xs      4px       8px
	   sm      8px       16px
	   md      12px      24px
	   lg      20px      40px
	   xl      32px      64px
	   2xl     48px      96px
	*/
	--space-0:   0;
	--space-px:  1px;
	--space-xs:  clamp(4px, calc(2px + 0.4vw), 8px);
	--space-sm:  clamp(8px, calc(4px + 0.8vw), 16px);
	--space-md:  clamp(12px, calc(6px + 1.2vw), 32px);
	--space-lg:  clamp(20px, calc(10px + 2vw), 40px);
	--space-xl:  clamp(32px, calc(16px + 3vw), 64px);
	--space-2xl: clamp(48px, calc(20px + 5vw), 96px);

	/* Font families — change these to retheme all typography */
	--font-heading: "Work Sans", sans-serif;
	--font-body:    "Work Sans", sans-serif;

	/* Font sizes */
	--text-xxs:   0.5rem;   /* 12px */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg:   1.125rem;  /* 18px */
	--text-xl:   1.25rem;   /* 20px */
	--text-2xl:  1.5rem;    /* 24px */
	--text-3xl:  1.875rem;  /* 30px */
	--text-4xl:  2.25rem;   /* 36px */
	--text-5xl:  3rem;      /* 48px */
	--text-6xl:  3.75rem;   /* 60px */
	--text-7xl:  4.5rem;    /* 72px */
	--text-8xl:  6rem;      /* 96px */
	--text-9xl:  8rem;      /* 128px */

	/* Font weights */
	--font-light:    300;
	--font-normal:   400;
	--font-medium:   500;
	--font-semibold: 600;
	--font-bold:     700;
	--font-black:    900;

	/* Border radius */
	--rounded-none: 0;
	--rounded-sm:   2px;
	--rounded:      4px;
	--rounded-md:   6px;
	--rounded-lg:   8px;
	--rounded-xl:   12px;
	--rounded-2xl:  16px;
	--rounded-3xl:  24px;
	--rounded-full: 9999px;

	/* Shadows */
	--shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
	--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	--shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* Text shadows */
	--text-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.25);
	--text-shadow:     0 1px 3px rgba(0, 0, 0, 0.3);
	--text-shadow-md:  0 2px 4px rgba(0, 0, 0, 0.3);
	--text-shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.3);
	--text-shadow-xl:  0 4px 16px rgba(0, 0, 0, 0.35);
	--text-shadow-2xl: 0 8px 24px rgba(0, 0, 0, 0.4);

	/* Z-index scale */
	--z-0:  0;
	--z-10: 10;
	--z-20: 20;
	--z-30: 30;
	--z-40: 40;
	--z-50: 50;

	/* Breakpoints — for reference only, media queries need literal values
	   sm: 640px   md: 768px   lg: 1024px   xl: 1280px   2xl: 1536px */

	/* Transitions */
	--duration-fast:    150ms;
	--duration-default: 300ms;
	--duration-slow:    500ms;

	/* ── Theme colors ────────────────────────
	   CHANGE THESE to retheme everything.
	   All shades, surfaces, and utilities derive from these.
	*/
	--color-primary:   #3b82f6;
	--color-accent:    #0fbffe;
	--color-success:   #22c55e;
	--color-warning:   #eab308;
	--color-danger:    #ef4444;

	/* ── Generated shade palettes ────────────
	   50 (lightest) → 900 (darkest)
	   Uses color-mix() — updates automatically when you change --color-* above.
	*/

	/* Primary */
	--primary-50:  color-mix(in srgb, white 92%, var(--color-primary));
	--primary-100: color-mix(in srgb, white 82%, var(--color-primary));
	--primary-200: color-mix(in srgb, white 65%, var(--color-primary));
	--primary-300: color-mix(in srgb, white 45%, var(--color-primary));
	--primary-400: color-mix(in srgb, white 20%, var(--color-primary));
	--primary-500: var(--color-primary);
	--primary-600: color-mix(in srgb, black 15%, var(--color-primary));
	--primary-700: color-mix(in srgb, black 35%, var(--color-primary));
	--primary-800: color-mix(in srgb, black 55%, var(--color-primary));
	--primary-900: color-mix(in srgb, black 75%, var(--color-primary));

	/* Accent */
	--accent-50:  color-mix(in srgb, white 92%, var(--color-accent));
	--accent-100: color-mix(in srgb, white 82%, var(--color-accent));
	--accent-200: color-mix(in srgb, white 65%, var(--color-accent));
	--accent-300: color-mix(in srgb, white 45%, var(--color-accent));
	--accent-400: color-mix(in srgb, white 20%, var(--color-accent));
	--accent-500: var(--color-accent);
	--accent-600: color-mix(in srgb, black 15%, var(--color-accent));
	--accent-700: color-mix(in srgb, black 35%, var(--color-accent));
	--accent-800: color-mix(in srgb, black 55%, var(--color-accent));
	--accent-900: color-mix(in srgb, black 75%, var(--color-accent));

	/* Success */
	--success-50:  color-mix(in srgb, white 92%, var(--color-success));
	--success-100: color-mix(in srgb, white 82%, var(--color-success));
	--success-200: color-mix(in srgb, white 65%, var(--color-success));
	--success-300: color-mix(in srgb, white 45%, var(--color-success));
	--success-400: color-mix(in srgb, white 20%, var(--color-success));
	--success-500: var(--color-success);
	--success-600: color-mix(in srgb, black 15%, var(--color-success));
	--success-700: color-mix(in srgb, black 35%, var(--color-success));
	--success-800: color-mix(in srgb, black 55%, var(--color-success));
	--success-900: color-mix(in srgb, black 75%, var(--color-success));

	/* Warning */
	--warning-50:  color-mix(in srgb, white 92%, var(--color-warning));
	--warning-100: color-mix(in srgb, white 82%, var(--color-warning));
	--warning-200: color-mix(in srgb, white 65%, var(--color-warning));
	--warning-300: color-mix(in srgb, white 45%, var(--color-warning));
	--warning-400: color-mix(in srgb, white 20%, var(--color-warning));
	--warning-500: var(--color-warning);
	--warning-600: color-mix(in srgb, black 15%, var(--color-warning));
	--warning-700: color-mix(in srgb, black 35%, var(--color-warning));
	--warning-800: color-mix(in srgb, black 55%, var(--color-warning));
	--warning-900: color-mix(in srgb, black 75%, var(--color-warning));

	/* Danger */
	--danger-50:  color-mix(in srgb, white 92%, var(--color-danger));
	--danger-100: color-mix(in srgb, white 82%, var(--color-danger));
	--danger-200: color-mix(in srgb, white 65%, var(--color-danger));
	--danger-300: color-mix(in srgb, white 45%, var(--color-danger));
	--danger-400: color-mix(in srgb, white 20%, var(--color-danger));
	--danger-500: var(--color-danger);
	--danger-600: color-mix(in srgb, black 15%, var(--color-danger));
	--danger-700: color-mix(in srgb, black 35%, var(--color-danger));
	--danger-800: color-mix(in srgb, black 55%, var(--color-danger));
	--danger-900: color-mix(in srgb, black 75%, var(--color-danger));

	/* Neutral */
	--white-100: color-mix(in srgb, transparent 90%, white);
	--white-200: color-mix(in srgb, transparent 80%, white);
	--white-300: color-mix(in srgb, transparent 70%, white);
	--white-400: color-mix(in srgb, transparent 60%, white);
	--white-500: color-mix(in srgb, transparent 50%, white);
	--white-600: color-mix(in srgb, transparent 40%, white);
	--white-700: color-mix(in srgb, transparent 30%, white);
	--white-800: color-mix(in srgb, transparent 20%, white);
	--white-900: color-mix(in srgb, transparent 10%, white);

	--black-100: color-mix(in srgb, transparent 90%, black);
	--black-200: color-mix(in srgb, transparent 80%, black);
	--black-300: color-mix(in srgb, transparent 70%, black);
	--black-400: color-mix(in srgb, transparent 60%, black);
	--black-500: color-mix(in srgb, transparent 50%, black);
	--black-600: color-mix(in srgb, transparent 40%, black);
	--black-700: color-mix(in srgb, transparent 30%, black);
	--black-800: color-mix(in srgb, transparent 20%, black);
	--black-900: color-mix(in srgb, transparent 10%, black);

	/* Content — full range from light text to dark backgrounds
	   50–300:  white mixed into core-mixin  → readable text on dark bg
	   400:     the mixin color itself
	   500–700: mixin blended toward core    → elevated bg, borders
	   800–900: darker than core             → deep backgrounds
	   Change --color-core + --color-core-mixin to retheme the whole scale.
	*/
	--content-base: var(--color-core);
	--content-50:  color-mix(in srgb, white 85%, var(--color-core-mixin));
	--content-100: color-mix(in srgb, white 65%, var(--color-core-mixin));
	--content-200: color-mix(in srgb, white 45%, var(--color-core-mixin));
	--content-300: color-mix(in srgb, white 25%, var(--color-core-mixin));
	--content-400: var(--color-core-mixin);
	--content-500: color-mix(in srgb, var(--color-core-mixin) 60%, var(--color-core));
	--content-600: color-mix(in srgb, var(--color-core-mixin) 40%, var(--color-core)); /* Border Color*/
	--content-accent: color-mix(in srgb, var(--color-core-mixin) 15%, var(--content-700)); /* Lifted content — hue-neutral */
	--content-700: color-mix(in srgb, var(--color-core-mixin) 10%, var(--color-core)); /* Content Color */
	--content-800: color-mix(in srgb, black 15%, var(--color-core));
	--content-900: color-mix(in srgb, black 35%, var(--color-core));
}

/* ── Light theme ──────────────────────────
   Activated via <html data-theme="light">.
   Inverts the content scale: text becomes dark, surfaces become light.
   All utilities (bg-base, text-content-*, border-base, etc.) auto-flip
   because they reference the same variables.

   To customize: change --color-core (page bg) and --color-core-mixin (text base).
*/
[data-theme="light"] {
	--color-core:      #f0f2f5;
	--color-core-mixin: #6b7280;
	--color-bg: var(--color-core) !important;
	--title-color: #111827;

	/* Content scale — inverted for light backgrounds
	   50–300:  black mixed into core-mixin  → dark readable text
	   400:     the mixin color itself
	   500–600: mixin blended toward core    → subtle borders
	   700:     near-white                   → card surface  (bg-base)
	   800–900: slight offsets from core     → inner / deep surfaces
	*/
	--content-base: var(--color-core);
	--content-50:  color-mix(in srgb, black 85%, var(--color-core-mixin));
	--content-100: color-mix(in srgb, black 65%, var(--color-core-mixin));
	--content-200: color-mix(in srgb, black 45%, var(--color-core-mixin));
	--content-300: color-mix(in srgb, black 25%, var(--color-core-mixin));
	--content-400: var(--color-core-mixin);
	--content-500: color-mix(in srgb, var(--color-core-mixin) 30%, var(--color-core));
	--content-600: color-mix(in srgb, var(--color-core-mixin) 18%, var(--color-core));
	--content-accent: color-mix(in srgb, black 4%, var(--content-700)); /* Lifted content — hue-neutral */
	--content-700: color-mix(in srgb, white 80%, var(--color-core));
	--content-800: color-mix(in srgb, black 2%, var(--color-core));
	--content-900: color-mix(in srgb, black 6%, var(--color-core));
	
	
    --text-price: "Price";
}

/*═══════════════════════════════
	BASE
═══════════════════════════════*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

[x-cloak] { display: none !important; }
strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=submit],
button {
  appearance: none;
  cursor: pointer;
  text-align: left;
}

textarea {
  resize: none;
}

symbol,
use,
svg {
  overflow: visible;
}

svg,
img {
  display: block;
}

li {
  display: block;
}

button {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:root *[hidden] {
  display: none;
}

:focus {
  outline: 0;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
}

@keyframes pageMoveOut {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes pageMoveIn {
  0%, 50% {
    scale: 0.98;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
::view-transition-old(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveOut;
  transform-origin: center top;
}

::view-transition-new(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveIn;
  transform-origin: center top;
}

::view-transition-group(siteContent) {
  z-index: 2;
}

::view-transition-group(siteHeaderTop),
::view-transition-group(siteHeader),
::view-transition-group(siteNavigation),
::view-transition-group(siteBgImage),
::view-transition-group(siteFooter) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
  z-index: 3;
}

::view-transition-group(siteBgImage) {
  z-index: 1;
}

.scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--content-400) var(--color-bg);
    scrollbar-gutter: stable;
}

html,
body {
  min-height: 100vh;
  background: var(--color-core) !important;
}

html {
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--content-400) var(--color-bg);
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}
html.no-scroll {
  overflow: hidden;
  overscroll-behavior-y: none;
}

body {
  position: relative;
  max-width: 100%;
  width: 100%;
  line-height: normal;
  color: var(--content-100);
  accent-color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 16px;
}
body::before {
  view-transition-name: siteBgImage;
}

::selection {
  color: var(--content-100);
  background-color: var(--color-primary);
  text-shadow: none;
}

input::placeholder,select::placeholder,message::placeholder {
    color: var(--content-200);
}

select option {
  color: var(--content-100);
  background-color: var(--color-bg);
}
.popup.drawer .store-form input[type=text],
.popup.drawer .store-form input[type=password],
.popup.drawer .store-form input[type=email],
.popup.drawer .store-form input[type=number],
.popup.drawer .store-form input[type=search],
.popup.drawer .store-form input[type=url],
.popup.drawer .store-form input[type=tel],
.popup.drawer .store-form input[type=date],
.popup.drawer .store-form input[type=time],
.popup.drawer .store-form input[type=datetime-local],
.popup.drawer .store-form input[type=file],
.popup.drawer .store-form input[type=month],
.popup.drawer .store-form input[type=week],
.popup.drawer .store-form select,
.popup.drawer .store-form textarea {
  user-select: auto;
}

.popup.popup-media-slider {
  --slider-spacing: 6px;
  --thumbs-size: 40px;
  --thumb-padding: 6px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(0, auto) calc(var(--thumbs-size) + var(--slider-spacing));
  overflow: hidden;
  backdrop-filter: blur(10px);
}
@media (width > 360px) {
  .popup.popup-media-slider {
    --slider-spacing: 12px;
    --thumbs-size: 70px;
  }
}
@media (width > 600px) {
  .popup.popup-media-slider {
    --thumbs-size: 70px;
  }
}
@media (width > 960px) {
  .popup.popup-media-slider {
    --thumbs-size: 90px;
  }
}
@media (width > 1400px) {
  .popup.popup-media-slider {
    --thumbs-size: 120px;
  }
}
.popup.popup-media-slider .popup-close {
  top: var(--slider-spacing);
  right: var(--slider-spacing);
  z-index: 2;
  backdrop-filter: blur(5px);
}
.popup.popup-media-slider .slider {
  width: 100%;
}
.popup.popup-media-slider .slider::part(container) {
  --swiper-navigation-size: 30px;
  --swiper-theme-color: var(--content-100);
}
@media (width > 600px) {
  .popup.popup-media-slider .slider::part(container) {
    --swiper-navigation-size: 36px;
  }
}
.popup.popup-media-slider .slider::part(wrapper) {
  align-items: center;
}
.popup.popup-media-slider .slide {
  align-content: center;
  padding: var(--slider-spacing);
}
.popup.popup-media-slider .slide-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.popup.popup-media-slider .slide-video {
  position: relative;
  border-radius: 5px;
  background: #000 var(--preview-image) center center/cover no-repeat;
}
.popup.popup-media-slider .slide-frame {
  display: block;
  margin: auto;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.popup.popup-media-slider .slide-frame:not(.iframe-loaded) {
  visibility: hidden;
  opacity: 0;
}
.popup.popup-media-slider .thumbs {
  display: flex;
  gap: var(--slider-spacing);
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 var(--slider-spacing) var(--slider-spacing);
}
.popup.popup-media-slider .thumb {
  display: block;
  width: var(--thumbs-size);
  height: var(--thumbs-size);
  padding: var(--thumb-padding);
  background-color: rgb(from var(--color-bg) r g b/0.7);
  cursor: pointer;
}
.popup.popup-media-slider .thumb-image,
.popup.popup-media-slider .thumb-youtube {
  width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  transition: opacity 0.3s ease-in-out;
}
.popup.popup-media-slider .thumb:not(.active) .thumb-image,
.popup.popup-media-slider .thumb:not(.active) .thumb-youtube {
  opacity: 0.5;
}
.popup.popup-media-slider .thumb-image {
  object-fit: contain;
}
.popup.popup-media-slider .thumb-youtube {
  position: relative;
  align-content: center;
}
.popup.popup-media-slider .thumb-youtube img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popup.popup-media-slider .thumb-youtube::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  background-color: var(--content-100);
  mask: url("https://template-assets.tebex.io/images/play.svg") center center/contain no-repeat;
}
.updating {
  pointer-events: none;
}
.updating > * {
  opacity: 0.3;
  filter: grayscale(100%);
}
.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 30px;
  height: 30px;
  background: url("https://template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}

.popup {
  --fade-duration: 300ms;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: var(--space-md);
  width: 100vw;
  z-index: 1000;
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) transparent;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: background-color var(--fade-duration) ease, opacity var(--fade-duration) ease-in-out, display var(--fade-duration) allow-discrete;
}
@starting-style {
  .popup {
    opacity: 0;
  }
}
.popup.drawer {
  user-select: none;
}
.popup.may-close {
  user-select: none;
  background-color: rgba(0, 0, 0, 0.4);
}
.popup[hidden] {
  opacity: 0;
  display: none;
}

.popup-scroll-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: calc(var(--content-padding) / 2);
  overscroll-behavior: none;
}
@media (width > 600px) {
  .popup-scroll-cont {
    padding: var(--content-padding);
  }
}
.popup-content {
  position: relative;
  width: 100%;
  max-width: 550px;
  padding: var(--widget-padding);
  background: var(--content-base);
  border-radius: var(--rounded-xl);
  border: 1px solid var(--content-600);
  transition: translate var(--fade-duration) ease, opacity var(--fade-duration) ease;
}
@starting-style {
  .popup-content {
    translate: 0 20px;
  }
}
.popup-switching .popup-content {
  opacity: 0;
  translate: 0 10px;
}
@media (pointer: coarse) {
  .popup-content {
    padding-bottom: calc(var(--widget-padding) * 2);
  }
}
.popup.touching .popup-content {
  transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease;
}
.popup.may-close .popup-content, .popup.drawer[hidden] .popup-content {
  opacity: 0.8;
  scale: 0.95;
}
.popup.drawer-up[hidden] .popup-content {
  translate: 0 -100%;
}
.popup.drawer-down[hidden] .popup-content {
  translate: 0 100%;
}
.popup.drawer-right[hidden] .popup-content {
  translate: 100% 0;
}
.popup.drawer-left[hidden] .popup-content {
  translate: -100% 0;
}
.popup:not(.drawer)[hidden] .popup-content {
  translate: 0 20px;
}
.popup.popup-loading .popup-content {
  min-height: 180px;
}
.popup.popup-loading .popup-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  background-color: var(--content-100);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.drawer-up .popup-content::after, .drawer-down .popup-content::after, .drawer-left .popup-content::after, .drawer-right .popup-content::after {
  content: "";
  display: block;
  position: absolute;
  background: rgb(from var(--color-300) r g b/0.33);
  border-radius: 2px;
  pointer-events: none;
}
.drawer-up .popup-content::after, .drawer-down .popup-content::after {
  left: 0;
  right: 0;
  margin-inline: auto;
  height: 4px;
  width: 100px;
}
.drawer-up .popup-content::after {
  bottom: 7px;
}
.drawer-down .popup-content::after {
  top: 7px;
}
.drawer-left .popup-content::after, .drawer-right .popup-content::after {
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 4px;
  height: 100px;
}
.drawer-left .popup-content::after {
  right: 7px;
}
.drawer-right .popup-content::after {
  left: 7px;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}
.popup-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--content-100);
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/20px no-repeat;
}
@media (width <= 600px) {
  .popup-close {
    width: 50px;
    height: 50px;
  }
  .popup-close::before {
    mask-size: 24px;
  }
}

.updating {
  pointer-events: none;
}
.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 38px;
  height: 38px;
  background-color: var(--content-100);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.updating > * {
  filter: grayscale(100%);
}

.toaster {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  max-width: 360px;
  pointer-events: none;
}
.toaster:empty {
  display: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  background: var(--content-accent);
  border: 1px solid var(--content-500);
  color: var(--title-color);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--rounded-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: opacity 0.3s ease;
}
@starting-style {
  .toast {
    opacity: 0;
  }
}
.toast[hidden] {
  display: flex;
  opacity: 0;
}
.toast.toast-warning {
  border-color: #cab600;
  background: rgba(202, 182, 0, 0.12);
  color: #f5e44d;
}
.toast.toast-error {
  border-color: #C12E2E;
  background: rgba(193, 46, 46, 0.12);
  color: #f07070;
}
.toast.toast-success {
  border-color: var(--color-success);
  background: rgba(76, 175, 80, 0.12);
  color: var(--color-success);
}

.toast-close {
  margin-left: auto;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--rounded-md);
  opacity: 0.4;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.toast-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/14px no-repeat;
}
.toast-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.08);
}

h1, h2, h3, h4, h5 { color: var(--title-color); font-family: var(--font-heading); }
svg, img {
    max-width:100%;
}
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.container {
	max-width: var(--tebex-legal-footer-max-width);
}
.line-clamp-1,
.line-clamp-2,
.line-clamp-3,
.line-clamp-4,
.line-clamp-5 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }
.line-clamp-4 { -webkit-line-clamp: 4; }
.line-clamp-5 { -webkit-line-clamp: 5; }

/*═══════════════════════════════
	DISPLAY
═══════════════════════════════*/

.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.hidden       { display: none; }
.invisible    { visibility: hidden; }
.visible      { visibility: visible; }

/*═══════════════════════════════
	POSITION
═══════════════════════════════*/

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

.sm\:static       { position: static; }
.sm\:relative       { position: relative; }
.sm\:absolute       { position: absolute; }
.sm\:fixed       { position: fixed; }
.sm\:sticky       { position: sticky; }

.md\:static       { position: static; }
.md\:relative       { position: relative; }
.md\:absolute       { position: absolute; }
.md\:fixed       { position: fixed; }
.md\:sticky       { position: sticky; }

.lg\:static       { position: static; }
.lg\:relative       { position: relative; }
.lg\:absolute       { position: absolute; }
.lg\:fixed       { position: fixed; }
.lg\:sticky       { position: sticky; }

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

/* Position offsets — positive */
.top-xs    { top: var(--space-xs); }    .bottom-xs  { bottom: var(--space-xs); }
.top-sm    { top: var(--space-sm); }    .bottom-sm  { bottom: var(--space-sm); }
.top-md    { top: var(--space-md); }    .bottom-md  { bottom: var(--space-md); }
.top-lg    { top: var(--space-lg); }    .bottom-lg  { bottom: var(--space-lg); }
.top-xl    { top: var(--space-xl); }    .bottom-xl  { bottom: var(--space-xl); }
.top-2xl   { top: var(--space-2xl); }   .bottom-2xl { bottom: var(--space-2xl); }

.left-xs   { left: var(--space-xs); }   .right-xs   { right: var(--space-xs); }
.left-sm   { left: var(--space-sm); }   .right-sm   { right: var(--space-sm); }
.left-md   { left: var(--space-md); }   .right-md   { right: var(--space-md); }
.left-lg   { left: var(--space-lg); }   .right-lg   { right: var(--space-lg); }
.left-xl   { left: var(--space-xl); }   .right-xl   { right: var(--space-xl); }
.left-2xl  { left: var(--space-2xl); }  .right-2xl  { right: var(--space-2xl); }

/* Position offsets — negative */
.-top-xs    { top: calc(var(--space-xs) * -1); }    .-bottom-xs  { bottom: calc(var(--space-xs) * -1); }
.-top-sm    { top: calc(var(--space-sm) * -1); }    .-bottom-sm  { bottom: calc(var(--space-sm) * -1); }
.-top-md    { top: calc(var(--space-md) * -1); }    .-bottom-md  { bottom: calc(var(--space-md) * -1); }
.-top-lg    { top: calc(var(--space-lg) * -1); }    .-bottom-lg  { bottom: calc(var(--space-lg) * -1); }
.-top-xl    { top: calc(var(--space-xl) * -1); }    .-bottom-xl  { bottom: calc(var(--space-xl) * -1); }
.-top-2xl   { top: calc(var(--space-2xl) * -1); }   .-bottom-2xl { bottom: calc(var(--space-2xl) * -1); }

.-left-xs   { left: calc(var(--space-xs) * -1); }   .-right-xs   { right: calc(var(--space-xs) * -1); }
.-left-sm   { left: calc(var(--space-sm) * -1); }   .-right-sm   { right: calc(var(--space-sm) * -1); }
.-left-md   { left: calc(var(--space-md) * -1); }   .-right-md   { right: calc(var(--space-md) * -1); }
.-left-lg   { left: calc(var(--space-lg) * -1); }   .-right-lg   { right: calc(var(--space-lg) * -1); }
.-left-xl   { left: calc(var(--space-xl) * -1); }   .-right-xl   { right: calc(var(--space-xl) * -1); }
.-left-2xl  { left: calc(var(--space-2xl) * -1); }  .-right-2xl  { right: calc(var(--space-2xl) * -1); }

/* Position offsets — fractional */
.top-1\/2    { top: 50%; }
.top-1\/3    { top: 33.333%; }
.top-2\/3    { top: 66.666%; }
.top-full    { top: 100%; }
.bottom-1\/2 { bottom: 50%; }
.bottom-full { bottom: 100%; }
.left-1\/2   { left: 50%; }
.left-1\/3   { left: 33.333%; }
.left-2\/3   { left: 66.666%; }
.left-full   { left: 100%; }
.right-1\/2  { right: 50%; }
.right-full  { right: 100%; }

/*═══════════════════════════════
	SIZING
═══════════════════════════════*/

/* Width — fractional & keyword */
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-auto   { width: auto; }
.w-fit    { width: fit-content; }
.w-min    { width: min-content; }
.w-max    { width: max-content; }
.w-1\/2   { width: 50%; }
.w-1\/3   { width: 33.333%; }
.w-2\/3   { width: 66.666%; }
.w-1\/4   { width: 25%; }
.w-3\/4   { width: 75%; }
.w-1\/5   { width: 20%; }
.w-2\/5   { width: 40%; }
.w-3\/5   { width: 60%; }
.w-4\/5   { width: 80%; }

/* Width — fixed rem values */
.w-0    { width: 0; }
.w-1    { width: 0.25rem; }
.w-2    { width: 0.5rem; }
.w-3    { width: 0.75rem; }
.w-4    { width: 1rem; }
.w-5    { width: 1.25rem; }
.w-6    { width: 1.5rem; }
.w-8    { width: 2rem; }
.w-10   { width: 2.5rem; }
.w-12   { width: 3rem; }
.w-14   { width: 3.5rem; }
.w-16   { width: 4rem; }
.w-20   { width: 5rem; }
.w-24   { width: 6rem; }
.w-28   { width: 7rem; }
.w-32   { width: 8rem; }
.w-36   { width: 9rem; }
.w-40   { width: 10rem; }
.w-44   { width: 11rem; }
.w-48   { width: 12rem; }
.w-52   { width: 13rem; }
.w-56   { width: 14rem; }
.w-60   { width: 15rem; }
.w-64   { width: 16rem; }
.w-72   { width: 18rem; }
.w-80   { width: 20rem; }
.w-96   { width: 24rem; }

/* Height — fractional & keyword */
.h-full   { height: 100%; }
.h-screen { height: 100vh; }
.h-auto   { height: auto; }
.h-fit    { height: fit-content; }
.h-min    { height: min-content; }
.h-max    { height: max-content; }
.h-1\/2   { height: 50%; }
.h-1\/3   { height: 33.333%; }
.h-2\/3   { height: 66.666%; }
.h-1\/4   { height: 25%; }
.h-3\/4   { height: 75%; }
.h-1\/5   { height: 20%; }
.h-2\/5   { height: 40%; }
.h-3\/5   { height: 60%; }
.h-4\/5   { height: 80%; }

/* Height — fixed rem values */
.h-0    { height: 0; }
.h-1    { height: 0.25rem; }
.h-2    { height: 0.5rem; }
.h-3    { height: 0.75rem; }
.h-4    { height: 1rem; }
.h-5    { height: 1.25rem; }
.h-6    { height: 1.5rem; }
.h-8    { height: 2rem; }
.h-10   { height: 2.5rem; }
.h-12   { height: 3rem; }
.h-14   { height: 3.5rem; }
.h-16   { height: 4rem; }
.h-20   { height: 5rem; }
.h-24   { height: 6rem; }
.h-28   { height: 7rem; }
.h-32   { height: 8rem; }
.h-36   { height: 9rem; }
.h-40   { height: 10rem; }
.h-44   { height: 11rem; }
.h-48   { height: 12rem; }
.h-52   { height: 13rem; }
.h-56   { height: 14rem; }
.h-60   { height: 15rem; }
.h-64   { height: 16rem; }
.h-72   { height: 18rem; }
.h-80   { height: 20rem; }
.h-96   { height: 24rem; }

/* Min / Max */
.min-w-0    { min-width: 0; }
.min-w-1    { min-width: 0.25rem; }
.min-w-2    { min-width: 0.5rem; }
.min-w-3    { min-width: 0.75rem; }
.min-w-4    { min-width: 1rem; }
.min-w-5    { min-width: 1.25rem; }
.min-w-6    { min-width: 1.5rem; }
.min-w-8    { min-width: 2rem; }
.min-w-10   { min-width: 2.5rem; }
.min-w-12   { min-width: 3rem; }
.min-w-14   { min-width: 3.5rem; }
.min-w-16   { min-width: 4rem; }
.min-w-20   { min-width: 5rem; }
.min-w-24   { min-width: 6rem; }
.min-w-28   { min-width: 7rem; }
.min-w-32   { min-width: 8rem; }
.min-w-36   { min-width: 9rem; }
.min-w-40   { min-width: 10rem; }
.min-w-44   { min-width: 11rem; }
.min-w-48   { min-width: 12rem; }
.min-w-52   { min-width: 13rem; }
.min-w-56   { min-width: 14rem; }
.min-w-60   { min-width: 15rem; }
.min-w-64   { min-width: 16rem; }
.min-w-72   { min-width: 18rem; }
.min-w-80   { min-width: 20rem; }
.min-w-96   { min-width: 24rem; }
.min-w-full { min-width: 100%; }
.min-w-fit  { min-width: fit-content; }
.min-w-min  { min-width: min-content; }
.min-w-max  { min-width: max-content; }
.max-w-none { max-width: none; }
.max-w-3    { max-width: 0.75rem; }
.max-w-4    { max-width: 1rem; }
.max-w-5    { max-width: 1.25rem; }
.max-w-6    { max-width: 1.5rem; }
.max-w-8    { max-width: 2rem; }
.max-w-10   { max-width: 2.5rem; }
.max-w-12   { max-width: 3rem; }
.max-w-14   { max-width: 3.5rem; }
.max-w-16   { max-width: 4rem; }
.max-w-20   { max-width: 5rem; }
.max-w-24   { max-width: 6rem; }
.max-w-28   { max-width: 7rem; }
.max-w-32   { max-width: 8rem; }
.max-w-36   { max-width: 9rem; }
.max-w-40   { max-width: 10rem; }
.max-w-44   { max-width: 11rem; }
.max-w-48   { max-width: 12rem; }
.max-w-52   { max-width: 13rem; }
.max-w-56   { max-width: 14rem; }
.max-w-60   { max-width: 15rem; }
.max-w-64   { max-width: 16rem; }
.max-w-72   { max-width: 18rem; }
.max-w-80   { max-width: 20rem; }
.max-w-82   { max-width: 21.5rem; }
.max-w-86   { max-width: 22rem; }
.max-w-96   { max-width: 24rem; }
.max-w-xs   { max-width: 320px; }
.max-w-sm   { max-width: 640px; }
.max-w-md   { max-width: 768px; }
.max-w-lg   { max-width: 1024px; }
.max-w-xl   { max-width: 1280px; }
.max-w-2xl  { max-width: 1536px; }
.max-w-3xl  { max-width: 1792px; }
.max-w-4xl  { max-width: 2048px; }
.max-w-5xl  { max-width: 2304px; }
.max-w-6xl  { max-width: 2560px; }
.max-w-7xl  { max-width: 2816px; }
.max-w-full { max-width: 100%; }
.max-w-fit  { max-width: fit-content; }
.min-h-0      { min-height: 0; }
.min-h-1      { min-height: 0.25rem; }
.min-h-2      { min-height: 0.5rem; }
.min-h-3      { min-height: 0.75rem; }
.min-h-4      { min-height: 1rem; }
.min-h-5      { min-height: 1.25rem; }
.min-h-6      { min-height: 1.5rem; }
.min-h-8      { min-height: 2rem; }
.min-h-10     { min-height: 2.5rem; }
.min-h-12     { min-height: 3rem; }
.min-h-14     { min-height: 3.5rem; }
.min-h-16     { min-height: 4rem; }
.min-h-20     { min-height: 5rem; }
.min-h-24     { min-height: 6rem; }
.min-h-28     { min-height: 7rem; }
.min-h-32     { min-height: 8rem; }
.min-h-36     { min-height: 9rem; }
.min-h-40     { min-height: 10rem; }
.min-h-44     { min-height: 11rem; }
.min-h-48     { min-height: 12rem; }
.min-h-52     { min-height: 13rem; }
.min-h-56     { min-height: 14rem; }
.min-h-60     { min-height: 15rem; }
.min-h-64     { min-height: 16rem; }
.min-h-72     { min-height: 18rem; }
.min-h-80     { min-height: 20rem; }
.min-h-96     { min-height: 24rem; }
.min-h-full   { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-fit    { min-height: fit-content; }
.min-h-min    { min-height: min-content; }
.min-h-max    { min-height: max-content; }
.max-h-none   { max-height: none; }
.max-h-xxs    { max-height: 120px; }
.max-h-xs     { max-height: 200px; }
.max-h-sm     { max-height: 300px; }
.max-h-md     { max-height: 400px; }
.max-h-lg     { max-height: 500px; }
.max-h-xl     { max-height: 600px; }
.max-h-2xl    { max-height: 800px; }
.max-h-full   { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-fit    { max-height: fit-content; }

/* Max-height — fixed rem values */
.max-h-0    { max-height: 0; }
.max-h-1    { max-height: 0.25rem; }
.max-h-2    { max-height: 0.5rem; }
.max-h-3    { max-height: 0.75rem; }
.max-h-4    { max-height: 1rem; }
.max-h-5    { max-height: 1.25rem; }
.max-h-6    { max-height: 1.5rem; }
.max-h-8    { max-height: 2rem; }
.max-h-10   { max-height: 2.5rem; }
.max-h-12   { max-height: 3rem; }
.max-h-14   { max-height: 3.5rem; }
.max-h-16   { max-height: 4rem; }
.max-h-20   { max-height: 5rem; }
.max-h-24   { max-height: 6rem; }
.max-h-28   { max-height: 7rem; }
.max-h-32   { max-height: 8rem; }
.max-h-36   { max-height: 9rem; }
.max-h-40   { max-height: 10rem; }
.max-h-44   { max-height: 11rem; }
.max-h-48   { max-height: 12rem; }
.max-h-52   { max-height: 13rem; }
.max-h-56   { max-height: 14rem; }
.max-h-60   { max-height: 15rem; }
.max-h-64   { max-height: 16rem; }
.max-h-72   { max-height: 18rem; }
.max-h-80   { max-height: 20rem; }
.max-h-96   { max-height: 24rem; }

/* Fixed size — sets width + height together (icons, thumbnails, avatars) */
.size-4   { width: 1rem;    height: 1rem; }
.size-5   { width: 1.25rem; height: 1.25rem; }
.size-6   { width: 1.5rem;  height: 1.5rem; }
.size-8   { width: 2rem;    height: 2rem; }
.size-10  { width: 2.5rem;  height: 2.5rem; }
.size-12  { width: 3rem;    height: 3rem; }
.size-14  { width: 3.5rem;    height: 3.5rem; }
.size-16  { width: 4rem;    height: 4rem; }
.size-18  { width: 4.25rem;    height: 4.25rem; }
.size-20  { width: 5rem;    height: 5rem; }
.size-24  { width: 6rem;    height: 6rem; }
.size-32  { width: 8rem;    height: 8rem; }
.size-40  { width: 10rem;   height: 10rem; }
.size-48  { width: 12rem;   height: 12rem; }
.size-full { width: 100%;   height: 100%; }

/*═══════════════════════════════
	SPACE BETWEEN CHILDREN
	Adds margin between direct children (not the first).
	Uses the "lobotomized owl" selector: > * + *
═══════════════════════════════*/

/* Vertical spacing (space-y) */
.space-y-xs  > * + * { margin-top: var(--space-xs); }
.space-y-sm  > * + * { margin-top: var(--space-sm); }
.space-y-md  > * + * { margin-top: var(--space-md); }
.space-y-lg  > * + * { margin-top: var(--space-lg); }
.space-y-xl  > * + * { margin-top: var(--space-xl); }
.space-y-2xl > * + * { margin-top: var(--space-2xl); }

/* Horizontal spacing (space-x) */
.space-x-xs  > * + * { margin-left: var(--space-xs); }
.space-x-sm  > * + * { margin-left: var(--space-sm); }
.space-x-md  > * + * { margin-left: var(--space-md); }
.space-x-lg  > * + * { margin-left: var(--space-lg); }
.space-x-xl  > * + * { margin-left: var(--space-xl); }
.space-x-2xl > * + * { margin-left: var(--space-2xl); }

/*═══════════════════════════════
	FLEX & GRID
═══════════════════════════════*/

.flex { display: flex; }

/* Flex parent modifiers (chain with .flex) */
.flex-wrap  { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-col     { flex-direction: column; }
.flex-col-rev { flex-direction: column-reverse; }
.flex-row-rev { flex-direction: row-reverse; }

/* Align Items */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* Justify Content */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* Flex Gap (same fluid scale as padding/margin) */
.gap-none { gap: 0; }
.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }
.gap-2xl  { gap: var(--space-2xl); }

/* Gap — fixed rem values */
.gap-0    { gap: 0; }
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }
.gap-12   { gap: 3rem; }
.gap-14   { gap: 3.5rem; }
.gap-16   { gap: 4rem; }
.gap-20   { gap: 5rem; }
.gap-24   { gap: 6rem; }
.gap-28   { gap: 7rem; }
.gap-32   { gap: 8rem; }
.gap-36   { gap: 9rem; }
.gap-40   { gap: 10rem; }
.gap-44   { gap: 11rem; }
.gap-48   { gap: 12rem; }
.gap-52   { gap: 13rem; }
.gap-56   { gap: 14rem; }
.gap-60   { gap: 15rem; }
.gap-64   { gap: 16rem; }
.gap-72   { gap: 18rem; }
.gap-80   { gap: 20rem; }
.gap-96   { gap: 24rem; }

/* Gap — X axis (column-gap) */
.gap-x-none { column-gap: 0; }
.gap-x-xs   { column-gap: var(--space-xs); }
.gap-x-sm   { column-gap: var(--space-sm); }
.gap-x-md   { column-gap: var(--space-md); }
.gap-x-lg   { column-gap: var(--space-lg); }
.gap-x-xl   { column-gap: var(--space-xl); }
.gap-x-2xl  { column-gap: var(--space-2xl); }
.gap-x-0    { column-gap: 0; }
.gap-x-1    { column-gap: 0.25rem; }
.gap-x-2    { column-gap: 0.5rem; }
.gap-x-3    { column-gap: 0.75rem; }
.gap-x-4    { column-gap: 1rem; }
.gap-x-5    { column-gap: 1.25rem; }
.gap-x-6    { column-gap: 1.5rem; }
.gap-x-8    { column-gap: 2rem; }
.gap-x-10   { column-gap: 2.5rem; }
.gap-x-12   { column-gap: 3rem; }
.gap-x-16   { column-gap: 4rem; }
.gap-x-20   { column-gap: 5rem; }
.gap-x-24   { column-gap: 6rem; }
.gap-x-32   { column-gap: 8rem; }

/* Gap — Y axis (row-gap) */
.gap-y-none { row-gap: 0; }
.gap-y-xs   { row-gap: var(--space-xs); }
.gap-y-sm   { row-gap: var(--space-sm); }
.gap-y-md   { row-gap: var(--space-md); }
.gap-y-lg   { row-gap: var(--space-lg); }
.gap-y-xl   { row-gap: var(--space-xl); }
.gap-y-2xl  { row-gap: var(--space-2xl); }
.gap-y-0    { row-gap: 0; }
.gap-y-1    { row-gap: 0.25rem; }
.gap-y-2    { row-gap: 0.5rem; }
.gap-y-3    { row-gap: 0.75rem; }
.gap-y-4    { row-gap: 1rem; }
.gap-y-5    { row-gap: 1.25rem; }
.gap-y-6    { row-gap: 1.5rem; }
.gap-y-8    { row-gap: 2rem; }
.gap-y-10   { row-gap: 2.5rem; }
.gap-y-12   { row-gap: 3rem; }
.gap-y-16   { row-gap: 4rem; }
.gap-y-20   { row-gap: 5rem; }
.gap-y-24   { row-gap: 6rem; }
.gap-y-32   { row-gap: 8rem; }

/* Flex child utilities (standalone — use on children) */
.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none    { flex: none; }
.grow         { flex-grow: 1; }
.grow-0       { flex-grow: 0; }
.shrink       { flex-shrink: 1; }
.shrink-0     { flex-shrink: 0; }
.self-auto    { align-self: auto; }
.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }
.order-first  { order: -9999; }
.order-last   { order: 9999; }
.order-none   { order: 0; }

/* Grid */
.grid { display: grid; }

.grid.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid.grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.grid.grid-rows-1  { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.grid.grid-rows-2  { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid.grid-rows-3  { grid-template-rows: repeat(3, minmax(0, 1fr)); }

/* Grid Gap (same fluid scale as flex) */
.grid.gap-none { gap: 0; }
.grid.gap-xs   { gap: var(--space-xs); }
.grid.gap-sm   { gap: var(--space-sm); }
.grid.gap-md   { gap: var(--space-md); }
.grid.gap-lg   { gap: var(--space-lg); }
.grid.gap-xl   { gap: var(--space-xl); }
.grid.gap-2xl  { gap: var(--space-2xl); }

/* Grid child — column span */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }
.col-span-full { grid-column: 1 / -1; }

/* Grid child — row span */
.row-span-1    { grid-row: span 1 / span 1; }
.row-span-2    { grid-row: span 2 / span 2; }
.row-span-3    { grid-row: span 3 / span 3; }
.row-span-4    { grid-row: span 4 / span 4; }
.row-span-6    { grid-row: span 6 / span 6; }
.row-span-full { grid-row: 1 / -1; }

/*═══════════════════════════════
	MARGIN  (uses unified fluid scale)
═══════════════════════════════*/

/* Margin — top / bottom */
.mt-none { margin-top: 0; }       .mb-none { margin-bottom: 0; }
.mt-auto { margin-top: auto; }    .mb-auto { margin-bottom: auto; }
.mt-xs   { margin-top: var(--space-xs); }  .mb-xs   { margin-bottom: var(--space-xs); }
.mt-sm   { margin-top: var(--space-sm); }  .mb-sm   { margin-bottom: var(--space-sm); }
.mt-md   { margin-top: var(--space-md); }  .mb-md   { margin-bottom: var(--space-md); }
.mt-lg   { margin-top: var(--space-lg); }  .mb-lg   { margin-bottom: var(--space-lg); }
.mt-xl   { margin-top: var(--space-xl); }  .mb-xl   { margin-bottom: var(--space-xl); }
.mt-2xl  { margin-top: var(--space-2xl); } .mb-2xl  { margin-bottom: var(--space-2xl); }

/* Margin — left / right */
.ml-none { margin-left: 0; }      .mr-none { margin-right: 0; }
.ml-auto { margin-left: auto; }   .mr-auto { margin-right: auto; }
.ml-xs   { margin-left: var(--space-xs); }  .mr-xs   { margin-right: var(--space-xs); }
.ml-sm   { margin-left: var(--space-sm); }  .mr-sm   { margin-right: var(--space-sm); }
.ml-md   { margin-left: var(--space-md); }  .mr-md   { margin-right: var(--space-md); }
.ml-lg   { margin-left: var(--space-lg); }  .mr-lg   { margin-right: var(--space-lg); }
.ml-xl   { margin-left: var(--space-xl); }  .mr-xl   { margin-right: var(--space-xl); }
.ml-2xl  { margin-left: var(--space-2xl); } .mr-2xl  { margin-right: var(--space-2xl); }

/* Margin — all sides */
.m-none { margin: 0; }
.m-xs   { margin: var(--space-xs); }
.m-sm   { margin: var(--space-sm); }
.m-md   { margin: var(--space-md); }
.m-lg   { margin: var(--space-lg); }
.m-xl   { margin: var(--space-xl); }
.m-2xl  { margin: var(--space-2xl); }

/* Margin — axis */
.mx-auto { margin-left: auto;           margin-right: auto; }
.mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg   { margin-left: var(--space-lg); margin-right: var(--space-lg); }
.mx-xl   { margin-left: var(--space-xl); margin-right: var(--space-xl); }
.mx-2xl  { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
.my-auto { margin-top: auto;            margin-bottom: auto; }
.my-xs   { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
.my-sm   { margin-top: var(--space-sm);  margin-bottom: var(--space-sm); }
.my-md   { margin-top: var(--space-md);  margin-bottom: var(--space-md); }
.my-lg   { margin-top: var(--space-lg);  margin-bottom: var(--space-lg); }
.my-xl   { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
.my-2xl  { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }

/* Negative margin — top / bottom */
.-mt-xs   { margin-top: calc(var(--space-xs) * -1); }  .-mb-xs   { margin-bottom: calc(var(--space-xs) * -1); }
.-mt-sm   { margin-top: calc(var(--space-sm) * -1); }  .-mb-sm   { margin-bottom: calc(var(--space-sm) * -1); }
.-mt-md   { margin-top: calc(var(--space-md) * -1); }  .-mb-md   { margin-bottom: calc(var(--space-md) * -1); }
.-mt-lg   { margin-top: calc(var(--space-lg) * -1); }  .-mb-lg   { margin-bottom: calc(var(--space-lg) * -1); }
.-mt-xl   { margin-top: calc(var(--space-xl) * -1); }  .-mb-xl   { margin-bottom: calc(var(--space-xl) * -1); }
.-mt-2xl  { margin-top: calc(var(--space-2xl) * -1); } .-mb-2xl  { margin-bottom: calc(var(--space-2xl) * -1); }

/* Negative margin — left / right */
.-ml-xs   { margin-left: calc(var(--space-xs) * -1); }  .-mr-xs   { margin-right: calc(var(--space-xs) * -1); }
.-ml-sm   { margin-left: calc(var(--space-sm) * -1); }  .-mr-sm   { margin-right: calc(var(--space-sm) * -1); }
.-ml-md   { margin-left: calc(var(--space-md) * -1); }  .-mr-md   { margin-right: calc(var(--space-md) * -1); }
.-ml-lg   { margin-left: calc(var(--space-lg) * -1); }  .-mr-lg   { margin-right: calc(var(--space-lg) * -1); }
.-ml-xl   { margin-left: calc(var(--space-xl) * -1); }  .-mr-xl   { margin-right: calc(var(--space-xl) * -1); }
.-ml-2xl  { margin-left: calc(var(--space-2xl) * -1); } .-mr-2xl  { margin-right: calc(var(--space-2xl) * -1); }

/* Negative margin — all sides */
.-m-xs   { margin: calc(var(--space-xs) * -1); }
.-m-sm   { margin: calc(var(--space-sm) * -1); }
.-m-md   { margin: calc(var(--space-md) * -1); }
.-m-lg   { margin: calc(var(--space-lg) * -1); }
.-m-xl   { margin: calc(var(--space-xl) * -1); }
.-m-2xl  { margin: calc(var(--space-2xl) * -1); }

/* Negative margin — axis */
.-mx-xs   { margin-left: calc(var(--space-xs) * -1); margin-right: calc(var(--space-xs) * -1); }
.-mx-sm   { margin-left: calc(var(--space-sm) * -1); margin-right: calc(var(--space-sm) * -1); }
.-mx-md   { margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); }
.-mx-lg   { margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1); }
.-mx-xl   { margin-left: calc(var(--space-xl) * -1); margin-right: calc(var(--space-xl) * -1); }
.-mx-2xl  { margin-left: calc(var(--space-2xl) * -1); margin-right: calc(var(--space-2xl) * -1); }
.-my-xs   { margin-top: calc(var(--space-xs) * -1);  margin-bottom: calc(var(--space-xs) * -1); }
.-my-sm   { margin-top: calc(var(--space-sm) * -1);  margin-bottom: calc(var(--space-sm) * -1); }
.-my-md   { margin-top: calc(var(--space-md) * -1);  margin-bottom: calc(var(--space-md) * -1); }
.-my-lg   { margin-top: calc(var(--space-lg) * -1);  margin-bottom: calc(var(--space-lg) * -1); }
.-my-xl   { margin-top: calc(var(--space-xl) * -1);  margin-bottom: calc(var(--space-xl) * -1); }
.-my-2xl  { margin-top: calc(var(--space-2xl) * -1); margin-bottom: calc(var(--space-2xl) * -1); }

/*═══════════════════════════════
	PADDING  (uses unified fluid scale)
═══════════════════════════════*/

/* Padding — all sides */
.p-none { padding: 0 !important; }
.p-xs   { padding: var(--space-xs); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }
.p-2xl  { padding: var(--space-2xl); }

/* Padding — top / bottom */
.pt-none { padding-top: 0 !important; }      .pb-none { padding-bottom: 0 !important; }
.pt-xs   { padding-top: var(--space-xs); }   .pb-xs   { padding-bottom: var(--space-xs); }
.pt-sm   { padding-top: var(--space-sm); }   .pb-sm   { padding-bottom: var(--space-sm); }
.pt-md   { padding-top: var(--space-md); }   .pb-md   { padding-bottom: var(--space-md); }
.pt-lg   { padding-top: var(--space-lg); }   .pb-lg   { padding-bottom: var(--space-lg); }
.pt-xl   { padding-top: var(--space-xl); }   .pb-xl   { padding-bottom: var(--space-xl); }
.pt-2xl  { padding-top: var(--space-2xl); }  .pb-2xl  { padding-bottom: var(--space-2xl); }

/* Padding — left / right */
.pl-none { padding-left: 0 !important; }     .pr-none { padding-right: 0 !important; }
.pl-xs   { padding-left: var(--space-xs); }  .pr-xs   { padding-right: var(--space-xs); }
.pl-sm   { padding-left: var(--space-sm); }  .pr-sm   { padding-right: var(--space-sm); }
.pl-md   { padding-left: var(--space-md); }  .pr-md   { padding-right: var(--space-md); }
.pl-lg   { padding-left: var(--space-lg); }  .pr-lg   { padding-right: var(--space-lg); }
.pl-xl   { padding-left: var(--space-xl); }  .pr-xl   { padding-right: var(--space-xl); }
.pl-2xl  { padding-left: var(--space-2xl); } .pr-2xl  { padding-right: var(--space-2xl); }

/* Padding — Y axis */
.py-none { padding-top: 0 !important;          padding-bottom: 0 !important; }
.py-xs   { padding-top: var(--space-xs);        padding-bottom: var(--space-xs); }
.py-sm   { padding-top: var(--space-sm);        padding-bottom: var(--space-sm); }
.py-md   { padding-top: var(--space-md);        padding-bottom: var(--space-md); }
.py-lg   { padding-top: var(--space-lg);        padding-bottom: var(--space-lg); }
.py-xl   { padding-top: var(--space-xl);        padding-bottom: var(--space-xl); }
.py-2xl  { padding-top: var(--space-2xl);       padding-bottom: var(--space-2xl); }

/* Padding — X axis */
.px-none { padding-left: 0 !important;          padding-right: 0 !important; }
.px-xs   { padding-left: var(--space-xs);        padding-right: var(--space-xs); }
.px-sm   { padding-left: var(--space-sm);        padding-right: var(--space-sm); }
.px-md   { padding-left: var(--space-md);        padding-right: var(--space-md); }
.px-lg   { padding-left: var(--space-lg);        padding-right: var(--space-lg); }
.px-xl   { padding-left: var(--space-xl);        padding-right: var(--space-xl); }
.px-2xl  { padding-left: var(--space-2xl);       padding-right: var(--space-2xl); }

/*═══════════════════════════════
	TYPOGRAPHY
═══════════════════════════════*/

/* Size */
.text-xxs  { font-size: var(--text-xxs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-base); }
.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); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }
.text-6xl  { font-size: var(--text-6xl); }
.text-7xl  { font-size: var(--text-7xl); }
.text-8xl  { font-size: var(--text-8xl); }
.text-9xl  { font-size: var(--text-9xl); }

/* Weight */
.font-light    { font-weight: var(--font-light); }
.font-normal   { font-weight: var(--font-normal); }
.font-medium   { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold); }
.font-black    { font-weight: var(--font-black); }

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

/* Decoration / Transform */
.underline    { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }
.uppercase    { text-transform: uppercase; }
.lowercase    { text-transform: lowercase; }
.capitalize   { text-transform: capitalize; }
.normal-case  { text-transform: none; }
.italic       { font-style: italic; }
.not-italic   { font-style: normal; }

/* Whitespace / Wrapping */
.whitespace-nowrap   { white-space: nowrap; }
.whitespace-normal   { white-space: normal; }
.whitespace-pre      { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words       { overflow-wrap: break-word; }
.break-all         { word-break: break-all; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Line height */
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-normal  { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose   { line-height: 2; }

/* Letter spacing */
.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-normal  { letter-spacing: 0; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }

/*═══════════════════════════════
	BORDERS
═══════════════════════════════*/

.border   { border: 1px solid }
.border-t { border-top: 1px solid; }
.border-r { border-right: 1px solid; }
.border-b { border-bottom: 1px solid; }
.border-l { border-left: 1px solid; }
.border-2 { border: 2px solid; }

.border-none   { border: none !important; }
.border-t-none { border-top: none !important; }
.border-r-none { border-right: none !important; }
.border-b-none { border-bottom: none !important; }
.border-l-none { border-left: none !important; }

/*═══════════════════════════════
	BORDER RADIUS
═══════════════════════════════*/

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

/* Border radius — top */
.rounded-t-none { border-top-left-radius: 0;                    border-top-right-radius: 0; }
.rounded-t-sm   { border-top-left-radius: var(--rounded-sm);    border-top-right-radius: var(--rounded-sm); }
.rounded-t-md   { border-top-left-radius: var(--rounded-md);    border-top-right-radius: var(--rounded-md); }
.rounded-t-lg   { border-top-left-radius: var(--rounded-lg);    border-top-right-radius: var(--rounded-lg); }
.rounded-t-xl   { border-top-left-radius: var(--rounded-xl);    border-top-right-radius: var(--rounded-xl); }
.rounded-t-2xl  { border-top-left-radius: var(--rounded-2xl);   border-top-right-radius: var(--rounded-2xl); }
.rounded-t-3xl  { border-top-left-radius: var(--rounded-3xl);   border-top-right-radius: var(--rounded-3xl); }
.rounded-t-full { border-top-left-radius: var(--rounded-full);  border-top-right-radius: var(--rounded-full); }

/* Border radius — bottom */
.rounded-b-none { border-bottom-left-radius: 0;                    border-bottom-right-radius: 0; }
.rounded-b-sm   { border-bottom-left-radius: var(--rounded-sm);    border-bottom-right-radius: var(--rounded-sm); }
.rounded-b-md   { border-bottom-left-radius: var(--rounded-md);    border-bottom-right-radius: var(--rounded-md); }
.rounded-b-lg   { border-bottom-left-radius: var(--rounded-lg);    border-bottom-right-radius: var(--rounded-lg); }
.rounded-b-xl   { border-bottom-left-radius: var(--rounded-xl);    border-bottom-right-radius: var(--rounded-xl); }
.rounded-b-2xl  { border-bottom-left-radius: var(--rounded-2xl);   border-bottom-right-radius: var(--rounded-2xl); }
.rounded-b-3xl  { border-bottom-left-radius: var(--rounded-3xl);   border-bottom-right-radius: var(--rounded-3xl); }
.rounded-b-full { border-bottom-left-radius: var(--rounded-full);  border-bottom-right-radius: var(--rounded-full); }

/* Border radius — left */
.rounded-l-none { border-top-left-radius: 0;                    border-bottom-left-radius: 0; }
.rounded-l-sm   { border-top-left-radius: var(--rounded-sm);    border-bottom-left-radius: var(--rounded-sm); }
.rounded-l-md   { border-top-left-radius: var(--rounded-md);    border-bottom-left-radius: var(--rounded-md); }
.rounded-l-lg   { border-top-left-radius: var(--rounded-lg);    border-bottom-left-radius: var(--rounded-lg); }
.rounded-l-xl   { border-top-left-radius: var(--rounded-xl);    border-bottom-left-radius: var(--rounded-xl); }
.rounded-l-2xl  { border-top-left-radius: var(--rounded-2xl);   border-bottom-left-radius: var(--rounded-2xl); }
.rounded-l-full { border-top-left-radius: var(--rounded-full);  border-bottom-left-radius: var(--rounded-full); }

/* Border radius — right */
.rounded-r-none { border-top-right-radius: 0;                    border-bottom-right-radius: 0; }
.rounded-r-sm   { border-top-right-radius: var(--rounded-sm);    border-bottom-right-radius: var(--rounded-sm); }
.rounded-r-md   { border-top-right-radius: var(--rounded-md);    border-bottom-right-radius: var(--rounded-md); }
.rounded-r-lg   { border-top-right-radius: var(--rounded-lg);    border-bottom-right-radius: var(--rounded-lg); }
.rounded-r-xl   { border-top-right-radius: var(--rounded-xl);    border-bottom-right-radius: var(--rounded-xl); }
.rounded-r-2xl  { border-top-right-radius: var(--rounded-2xl);   border-bottom-right-radius: var(--rounded-2xl); }
.rounded-r-full { border-top-right-radius: var(--rounded-full);  border-bottom-right-radius: var(--rounded-full); }

/* Border radius — individual corners */
.rounded-tl-none { border-top-left-radius: 0; }
.rounded-tl-sm   { border-top-left-radius: var(--rounded-sm); }
.rounded-tl-md   { border-top-left-radius: var(--rounded-md); }
.rounded-tl-lg   { border-top-left-radius: var(--rounded-lg); }
.rounded-tl-xl   { border-top-left-radius: var(--rounded-xl); }
.rounded-tl-2xl  { border-top-left-radius: var(--rounded-2xl); }
.rounded-tl-full { border-top-left-radius: var(--rounded-full); }

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

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

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

/*═══════════════════════════════
	SHADOWS
═══════════════════════════════*/

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

.text-shadow-none { text-shadow: none; }
.text-shadow-sm   { text-shadow: var(--text-shadow-sm); }
.text-shadow      { text-shadow: var(--text-shadow); }
.text-shadow-md   { text-shadow: var(--text-shadow-md); }
.text-shadow-lg   { text-shadow: var(--text-shadow-lg); }
.text-shadow-xl   { text-shadow: var(--text-shadow-xl); }
.text-shadow-2xl  { text-shadow: var(--text-shadow-2xl); }

/*═══════════════════════════════
	GLOW

	Radial-gradient ellipsis glow.
	Compose with w-*, h-*, and positioning utilities.

	Usage:
	  <div class="relative overflow-hidden">
	    <div class="glow glow-primary w-96 h-64 absolute top-0 left-1/2 -translate-x-1/2"></div>
	    …content…
	  </div>

	Intensity:  glow-soft  (default)  glow-strong
═══════════════════════════════*/

.glow {
	--glow-color: white;
	--glow-intensity: 60%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--glow-color) var(--glow-intensity), transparent)  0%,
		color-mix(in srgb, var(--glow-color) calc(var(--glow-intensity) * 0.5), transparent)  25%,
		color-mix(in srgb, var(--glow-color) calc(var(--glow-intensity) * 0.2), transparent)  50%,
		transparent 70%
	);
	pointer-events: none;
}

/* Intensity */
.glow.glow-soft   { --glow-intensity: 35%; }
.glow.glow-strong { --glow-intensity: 85%; }

/* Theme colours — uses your existing --color-* tokens directly */
.glow.glow-primary { --glow-color: var(--color-primary); }
.glow.glow-accent  { --glow-color: var(--color-accent); }
.glow.glow-success { --glow-color: var(--color-success); }
.glow.glow-warning { --glow-color: var(--color-warning); }
.glow.glow-danger  { --glow-color: var(--color-danger); }
.glow.glow-white   { --glow-color: white; }

/*═══════════════════════════════
	OVERFLOW
═══════════════════════════════*/

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
.overflow-x-auto   { overflow-x: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-auto   { overflow-y: auto; }
.overflow-y-hidden { overflow-y: hidden; }
.scrollbar-hide {
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/*═══════════════════════════════
	OPACITY
═══════════════════════════════*/

.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.10; }
.opacity-20  { opacity: 0.20; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.30; }
.opacity-40  { opacity: 0.40; }
.opacity-50  { opacity: 0.50; }
.opacity-60  { opacity: 0.60; }
.opacity-70  { opacity: 0.70; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.80; }
.opacity-90  { opacity: 0.90; }
.opacity-95  { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/*═══════════════════════════════
	Z-INDEX
═══════════════════════════════*/

.z-0    { z-index: var(--z-0); }
.z-10   { z-index: var(--z-10); }
.z-20   { z-index: var(--z-20); }
.z-30   { z-index: var(--z-30); }
.z-40   { z-index: var(--z-40); }
.z-50   { z-index: var(--z-50); }
.z-auto { z-index: auto; }

/*═══════════════════════════════
	ORDER
═══════════════════════════════*/
.order-0    { order: 0 }
.order-5    { order: 5 }
.order-10    { order: 10 }
.order-20    { order: 20 }
.order-30    { order: 30 }
.order-40    { order: 40 }
.order-50    { order: 50 }

/*═══════════════════════════════
	CURSOR & INTERACTION
═══════════════════════════════*/

.cursor-auto        { cursor: auto; }
.cursor-pointer     { cursor: pointer; }
.cursor-default     { cursor: default; }
.cursor-text        { cursor: text; }
.cursor-move        { cursor: move; }
.cursor-grab        { cursor: grab; }
.cursor-grabbing    { cursor: grabbing; }
.cursor-wait        { cursor: wait; }
.cursor-help        { cursor: help; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all  { user-select: all; }
.select-auto { user-select: auto; }

/*═══════════════════════════════
	TRANSITIONS & ANIMATION
═══════════════════════════════*/

.transition            { transition: all var(--duration-default) ease; }
.transition-fast       { transition: all var(--duration-fast) ease; }
.transition-slow       { transition: all var(--duration-slow) ease; }
.transition-colors     { transition: color, background-color, border-color var(--duration-default) ease; }
.transition-opacity    { transition: opacity var(--duration-default) ease; }
.transition-shadow     { transition: box-shadow var(--duration-default) ease; }
.transition-transform  { transition: transform var(--duration-default) ease; }
.transition-none       { transition: none; }

/*═══════════════════════════════
	HOVER STATES
	Apply directly — includes built-in transition.
	Usage:  <button class="btn-primary hover:opacity-80">
═══════════════════════════════*/

/* Hover — opacity */
.hover\:opacity-50:hover  { opacity: 0.50; }
.hover\:opacity-60:hover  { opacity: 0.60; }
.hover\:opacity-70:hover  { opacity: 0.70; }
.hover\:opacity-75:hover  { opacity: 0.75; }
.hover\:opacity-80:hover  { opacity: 0.80; }
.hover\:opacity-90:hover  { opacity: 0.90; }
.hover\:opacity-100:hover { opacity: 1; }

/* Hover — scale */
.hover\:scale-95:hover  { transform: scale(0.95); }
.hover\:scale-100:hover { transform: scale(1); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }

/* Hover — brightness (great for colored buttons) */
.hover\:brightness-90:hover  { filter: brightness(0.9); }
.hover\:brightness-110:hover { filter: brightness(1.1); }
.hover\:brightness-125:hover { filter: brightness(1.25); }

/* Hover — background color */
.hover\:bg-content-500:hover { background-color: var(--content-500); }
.hover\:bg-content-600:hover { background-color: var(--content-600); }
.hover\:bg-content-700:hover { background-color: var(--content-700); }
.hover\:bg-content-800:hover { background-color: var(--content-800); }
.hover\:bg-primary-600:hover { background-color: var(--primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-accent-600:hover  { background-color: var(--accent-600); }
.hover\:bg-accent-700:hover  { background-color: var(--accent-700); }
.hover\:bg-danger-600:hover  { background-color: var(--danger-600); }
.hover\:bg-success-600:hover { background-color: var(--success-600); }

/* Hover — background transparency
   Usage: hover:bg-primary/10  = on hover, 10% primary
*/
.hover\:bg-primary\/5:hover   { background-color: color-mix(in srgb, transparent 95%, var(--color-primary)); }
.hover\:bg-primary\/10:hover  { background-color: color-mix(in srgb, transparent 90%, var(--color-primary)); }
.hover\:bg-primary\/20:hover  { background-color: color-mix(in srgb, transparent 80%, var(--color-primary)); }
.hover\:bg-primary\/30:hover  { background-color: color-mix(in srgb, transparent 70%, var(--color-primary)); }
.hover\:bg-primary\/40:hover  { background-color: color-mix(in srgb, transparent 60%, var(--color-primary)); }
.hover\:bg-primary\/50:hover  { background-color: color-mix(in srgb, transparent 50%, var(--color-primary)); }
.hover\:bg-primary\/60:hover  { background-color: color-mix(in srgb, transparent 40%, var(--color-primary)); }
.hover\:bg-primary\/70:hover  { background-color: color-mix(in srgb, transparent 30%, var(--color-primary)); }
.hover\:bg-primary\/80:hover  { background-color: color-mix(in srgb, transparent 20%, var(--color-primary)); }
.hover\:bg-primary\/90:hover  { background-color: color-mix(in srgb, transparent 10%, var(--color-primary)); }
.hover\:bg-primary\/100:hover { background-color: var(--color-primary); }

.hover\:bg-accent\/5:hover    { background-color: color-mix(in srgb, transparent 95%, var(--color-accent)); }
.hover\:bg-accent\/10:hover   { background-color: color-mix(in srgb, transparent 90%, var(--color-accent)); }
.hover\:bg-accent\/20:hover   { background-color: color-mix(in srgb, transparent 80%, var(--color-accent)); }
.hover\:bg-accent\/30:hover   { background-color: color-mix(in srgb, transparent 70%, var(--color-accent)); }
.hover\:bg-accent\/40:hover   { background-color: color-mix(in srgb, transparent 60%, var(--color-accent)); }
.hover\:bg-accent\/50:hover   { background-color: color-mix(in srgb, transparent 50%, var(--color-accent)); }
.hover\:bg-accent\/60:hover   { background-color: color-mix(in srgb, transparent 40%, var(--color-accent)); }
.hover\:bg-accent\/70:hover   { background-color: color-mix(in srgb, transparent 30%, var(--color-accent)); }
.hover\:bg-accent\/80:hover   { background-color: color-mix(in srgb, transparent 20%, var(--color-accent)); }
.hover\:bg-accent\/90:hover   { background-color: color-mix(in srgb, transparent 10%, var(--color-accent)); }
.hover\:bg-accent\/100:hover  { background-color: var(--color-accent); }

.hover\:bg-success\/5:hover   { background-color: color-mix(in srgb, transparent 95%, var(--color-success)); }
.hover\:bg-success\/10:hover  { background-color: color-mix(in srgb, transparent 90%, var(--color-success)); }
.hover\:bg-success\/20:hover  { background-color: color-mix(in srgb, transparent 80%, var(--color-success)); }
.hover\:bg-success\/30:hover  { background-color: color-mix(in srgb, transparent 70%, var(--color-success)); }
.hover\:bg-success\/40:hover  { background-color: color-mix(in srgb, transparent 60%, var(--color-success)); }
.hover\:bg-success\/50:hover  { background-color: color-mix(in srgb, transparent 50%, var(--color-success)); }
.hover\:bg-success\/60:hover  { background-color: color-mix(in srgb, transparent 40%, var(--color-success)); }
.hover\:bg-success\/70:hover  { background-color: color-mix(in srgb, transparent 30%, var(--color-success)); }
.hover\:bg-success\/80:hover  { background-color: color-mix(in srgb, transparent 20%, var(--color-success)); }
.hover\:bg-success\/90:hover  { background-color: color-mix(in srgb, transparent 10%, var(--color-success)); }
.hover\:bg-success\/100:hover { background-color: var(--color-success); }

.hover\:bg-warning\/5:hover   { background-color: color-mix(in srgb, transparent 95%, var(--color-warning)); }
.hover\:bg-warning\/10:hover  { background-color: color-mix(in srgb, transparent 90%, var(--color-warning)); }
.hover\:bg-warning\/20:hover  { background-color: color-mix(in srgb, transparent 80%, var(--color-warning)); }
.hover\:bg-warning\/30:hover  { background-color: color-mix(in srgb, transparent 70%, var(--color-warning)); }
.hover\:bg-warning\/40:hover  { background-color: color-mix(in srgb, transparent 60%, var(--color-warning)); }
.hover\:bg-warning\/50:hover  { background-color: color-mix(in srgb, transparent 50%, var(--color-warning)); }
.hover\:bg-warning\/60:hover  { background-color: color-mix(in srgb, transparent 40%, var(--color-warning)); }
.hover\:bg-warning\/70:hover  { background-color: color-mix(in srgb, transparent 30%, var(--color-warning)); }
.hover\:bg-warning\/80:hover  { background-color: color-mix(in srgb, transparent 20%, var(--color-warning)); }
.hover\:bg-warning\/90:hover  { background-color: color-mix(in srgb, transparent 10%, var(--color-warning)); }
.hover\:bg-warning\/100:hover { background-color: var(--color-warning); }

.hover\:bg-danger\/5:hover    { background-color: color-mix(in srgb, transparent 95%, var(--color-danger)); }
.hover\:bg-danger\/10:hover   { background-color: color-mix(in srgb, transparent 90%, var(--color-danger)); }
.hover\:bg-danger\/20:hover   { background-color: color-mix(in srgb, transparent 80%, var(--color-danger)); }
.hover\:bg-danger\/30:hover   { background-color: color-mix(in srgb, transparent 70%, var(--color-danger)); }
.hover\:bg-danger\/40:hover   { background-color: color-mix(in srgb, transparent 60%, var(--color-danger)); }
.hover\:bg-danger\/50:hover   { background-color: color-mix(in srgb, transparent 50%, var(--color-danger)); }
.hover\:bg-danger\/60:hover   { background-color: color-mix(in srgb, transparent 40%, var(--color-danger)); }
.hover\:bg-danger\/70:hover   { background-color: color-mix(in srgb, transparent 30%, var(--color-danger)); }
.hover\:bg-danger\/80:hover   { background-color: color-mix(in srgb, transparent 20%, var(--color-danger)); }
.hover\:bg-danger\/90:hover   { background-color: color-mix(in srgb, transparent 10%, var(--color-danger)); }
.hover\:bg-danger\/100:hover  { background-color: var(--color-danger); }

.hover\:bg-content\/5:hover   { background-color: color-mix(in srgb, transparent 95%, var(--color-core-mixin)); }
.hover\:bg-content\/10:hover  { background-color: color-mix(in srgb, transparent 90%, var(--color-core-mixin)); }
.hover\:bg-content\/20:hover  { background-color: color-mix(in srgb, transparent 80%, var(--color-core-mixin)); }
.hover\:bg-content\/30:hover  { background-color: color-mix(in srgb, transparent 70%, var(--color-core-mixin)); }
.hover\:bg-content\/40:hover  { background-color: color-mix(in srgb, transparent 60%, var(--color-core-mixin)); }
.hover\:bg-content\/50:hover  { background-color: color-mix(in srgb, transparent 50%, var(--color-core-mixin)); }
.hover\:bg-content\/60:hover  { background-color: color-mix(in srgb, transparent 40%, var(--color-core-mixin)); }
.hover\:bg-content\/70:hover  { background-color: color-mix(in srgb, transparent 30%, var(--color-core-mixin)); }
.hover\:bg-content\/80:hover  { background-color: color-mix(in srgb, transparent 20%, var(--color-core-mixin)); }
.hover\:bg-content\/90:hover  { background-color: color-mix(in srgb, transparent 10%, var(--color-core-mixin)); }
.hover\:bg-content\/100:hover { background-color: var(--color-core-mixin); }

/* Hover — text color */
.hover\:text-white:hover       { color: #fff; }
.hover\:text-content-50:hover  { color: var(--content-50); }
.hover\:text-content-100:hover { color: var(--content-100); }
.hover\:text-content-200:hover { color: var(--content-200); }
.hover\:text-primary:hover     { color: var(--primary-500); }
.hover\:text-accent:hover      { color: var(--accent-500); }
.hover\:text-title:hover       { color: var(--title-color); }

/* Hover — shadow */
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }

/*═══════════════════════════════
	TRANSFORMS
═══════════════════════════════*/

.scale-flip  { transform: scaleX(-1); }
.scale-90  { transform: scale(0.9); }
.scale-95  { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }

.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Translate X */
.translate-x-0      { transform: translateX(0); }
.translate-x-1      { transform: translateX(0.25rem); }
.translate-x-2      { transform: translateX(0.5rem); }
.translate-x-4      { transform: translateX(1rem); }
.translate-x-8      { transform: translateX(2rem); }
.translate-x-12     { transform: translateX(3rem); }
.translate-x-16     { transform: translateX(4rem); }
.translate-x-18     { transform: translateX(5rem); }
.translate-x-20     { transform: translateX(6rem); }
.translate-x-22     { transform: translateX(7rem); }
.translate-x-24     { transform: translateX(8rem); }
.translate-x-26     { transform: translateX(10rem); }
.translate-x-28     { transform: translateX(12rem); }
.translate-x-30     { transform: translateX(14rem); }
.translate-x-32     { transform: translateX(16rem); }
.translate-x-34     { transform: translateX(18rem); }
.translate-x-36     { transform: translateX(20rem); }
.translate-x-38     { transform: translateX(22rem); }
.translate-x-40     { transform: translateX(24rem); }

.translate-x-1\/2   { transform: translateX(50%); }
.translate-x-1\/3   { transform: translateX(33.333%); }
.translate-x-2\/3   { transform: translateX(66.666%); }
.translate-x-full   { transform: translateX(100%); }
.-translate-x-1     { transform: translateX(-0.25rem); }
.-translate-x-2     { transform: translateX(-0.5rem); }
.-translate-x-4     { transform: translateX(-1rem); }
.-translate-x-8     { transform: translateX(-2rem); }
.-translate-x-12    { transform: translateX(-3rem); }
.-translate-x-16    { transform: translateX(-4rem); }
.-translate-x-18     { transform: translateX(-5rem); }
.-translate-x-20     { transform: translateX(-6rem); }
.-translate-x-22     { transform: translateX(-7rem); }
.-translate-x-24     { transform: translateX(-8rem); }
.-translate-x-26     { transform: translateX(-10rem); }
.-translate-x-28     { transform: translateX(-12rem); }
.-translate-x-30     { transform: translateX(-14rem); }
.-translate-x-32     { transform: translateX(-16rem); }
.-translate-x-34     { transform: translateX(-18rem); }
.-translate-x-36     { transform: translateX(-20rem); }
.-translate-x-38     { transform: translateX(-22rem); }
.-translate-x-40     { transform: translateX(-24rem); }

.-translate-x-1\/2  { transform: translateX(-50%); }
.-translate-x-1\/3  { transform: translateX(-33.333%); }
.-translate-x-2\/3  { transform: translateX(-66.666%); }
.-translate-x-full  { transform: translateX(-100%); }

/* Translate Y */
.translate-y-0      { transform: translateY(0); }
.translate-y-1      { transform: translateY(0.25rem); }
.translate-y-2      { transform: translateY(0.5rem); }
.translate-y-4      { transform: translateY(1rem); }
.translate-y-8      { transform: translateY(2rem); }
.translate-y-12     { transform: translateY(3rem); }
.translate-y-16     { transform: translateY(4rem); }

.translate-y-18     { transform: translateY(5rem); }
.translate-y-20     { transform: translateY(6rem); }
.translate-y-22     { transform: translateY(7rem); }
.translate-y-24     { transform: translateY(8rem); }
.translate-y-26     { transform: translateY(10rem); }
.translate-y-28     { transform: translateY(12rem); }
.translate-y-30     { transform: translateY(14rem); }
.translate-y-32     { transform: translateY(16rem); }
.translate-y-34     { transform: translateY(18rem); }
.translate-y-36     { transform: translateY(20rem); }
.translate-y-38     { transform: translateY(22rem); }
.translate-y-40     { transform: translateY(24rem); }

.translate-y-1\/2   { transform: translateY(50%); }
.translate-y-1\/3   { transform: translateY(33.333%); }
.translate-y-2\/3   { transform: translateY(66.666%); }
.translate-y-full   { transform: translateY(100%); }
.-translate-y-1     { transform: translateY(-0.25rem); }
.-translate-y-2     { transform: translateY(-0.5rem); }
.-translate-y-4     { transform: translateY(-1rem); }
.-translate-y-8     { transform: translateY(-2rem); }
.-translate-y-12    { transform: translateY(-3rem); }
.-translate-y-16    { transform: translateY(-4rem); }

.-translate-y-18     { transform: translateY(-5rem); }
.-translate-y-20     { transform: translateY(-6rem); }
.-translate-y-22     { transform: translateY(-7rem); }
.-translate-y-24     { transform: translateY(-8rem); }
.-translate-y-26     { transform: translateY(-10rem); }
.-translate-y-28     { transform: translateY(-12rem); }
.-translate-y-30     { transform: translateY(-14rem); }
.-translate-y-32     { transform: translateY(-16rem); }
.-translate-y-34     { transform: translateY(-18rem); }
.-translate-y-36     { transform: translateY(-20rem); }
.-translate-y-38     { transform: translateY(-22rem); }
.-translate-y-40     { transform: translateY(-24rem); }

.-translate-y-1\/2  { transform: translateY(-50%); }
.-translate-y-1\/3  { transform: translateY(-33.333%); }
.-translate-y-2\/3  { transform: translateY(-66.666%); }
.-translate-y-full  { transform: translateY(-100%); }

/*═══════════════════════════════
	OBJECT FIT & ASPECT RATIO
═══════════════════════════════*/

.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill    { object-fit: fill; }
.object-none    { object-fit: none; }
.object-center  { object-position: center; }
.object-top     { object-position: top; }

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

/*═══════════════════════════════
	BACKGROUND
═══════════════════════════════*/

.bg-transparent { background-color: transparent; }
.bg-current     { background-color: currentColor; }
.bg-cover       { background-size: cover; }
.bg-contain     { background-size: contain; }
.bg-center      { background-position: center; }
.bg-no-repeat   { background-repeat: no-repeat; }
.bg-fixed       { background-attachment: fixed; }

/*═══════════════════════════════
	ACCESSIBILITY
═══════════════════════════════*/

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
.not-sr-only {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
}

/* Focus ring utility */
.focus-ring:focus {
	outline: 2px solid var(--border-color);
	outline-offset: 2px;
}
.focus-ring:focus:not(:focus-visible) {
	outline: none;
}

/*═══════════════════════════════
	RESPONSIVE UTILITIES

	Mobile-first: defaults = mobile.
	Prefix activates at that breakpoint and UP.
	  sm:  →  640px+
	  md:  →  768px+
	  lg:  → 1024px+

	In HTML write the colon normally:
	  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-sm md:gap-lg">
	  <div class="flex flex-col md:flex-row gap-sm md:gap-md">
	  <div class="w-full md:w-1\/2 lg:w-1\/3">
	  <div class="hidden md:block">  — hidden on mobile, visible at 768px+
═══════════════════════════════*/

/* ── sm  (640px+) ──────────────────────── */
@media (min-width: 640px) {

	/* Display */
	.sm\:hidden       { display: none; }
	.sm\:block        { display: block; }
	.sm\:inline-block { display: inline-block; }
	.sm\:flex         { display: flex; flex-wrap: wrap; }
	.sm\:grid         { display: grid; }

	/* Grid columns */
	.grid.sm\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid.sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.sm\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid.sm\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.grid.sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

	/* Flex direction */
	.flex.sm\:flex-row    { flex-direction: row; }
	.flex.sm\:flex-col    { flex-direction: column; }
	.flex.sm\:flex-nowrap { flex-wrap: nowrap; }

	/* Width */
	.sm\:w-full  { width: 100%; }
	.sm\:w-auto  { width: auto; }
	.sm\:w-1\/2  { width: 50%; }
	.sm\:w-1\/3  { width: 33.333%; }
	.sm\:w-2\/3  { width: 66.666%; }
	.sm\:w-1\/4  { width: 25%; }
	.sm\:w-3\/4  { width: 75%; }

	/* Min Width */
	.sm\:min-w-0    { min-width: 0; }
	.sm\:min-w-4    { min-width: 1rem; }
	.sm\:min-w-8    { min-width: 2rem; }
	.sm\:min-w-12   { min-width: 3rem; }
	.sm\:min-w-16   { min-width: 4rem; }
	.sm\:min-w-20   { min-width: 5rem; }
	.sm\:min-w-24   { min-width: 6rem; }
	.sm\:min-w-32   { min-width: 8rem; }
	.sm\:min-w-40   { min-width: 10rem; }
	.sm\:min-w-48   { min-width: 12rem; }
	.sm\:min-w-56   { min-width: 14rem; }
	.sm\:min-w-64   { min-width: 16rem; }
	.sm\:min-w-72   { min-width: 18rem; }
	.sm\:min-w-80   { min-width: 20rem; }
	.sm\:min-w-96   { min-width: 24rem; }
	.sm\:min-w-full { min-width: 100%; }

	/* Max Width */
	.sm\:max-w-none { max-width: none; }
	.sm\:max-w-3    { max-width: 0.75rem; }
	.sm\:max-w-4    { max-width: 1rem; }
	.sm\:max-w-5    { max-width: 1.25rem; }
	.sm\:max-w-6    { max-width: 1.5rem; }
	.sm\:max-w-8    { max-width: 2rem; }
	.sm\:max-w-10   { max-width: 2.5rem; }
	.sm\:max-w-12   { max-width: 3rem; }
	.sm\:max-w-14   { max-width: 3.5rem; }
	.sm\:max-w-16   { max-width: 4rem; }
	.sm\:max-w-20   { max-width: 5rem; }
	.sm\:max-w-24   { max-width: 6rem; }
	.sm\:max-w-28   { max-width: 7rem; }
	.sm\:max-w-32   { max-width: 8rem; }
	.sm\:max-w-36   { max-width: 9rem; }
	.sm\:max-w-40   { max-width: 10rem; }
	.sm\:max-w-44   { max-width: 11rem; }
	.sm\:max-w-48   { max-width: 12rem; }
	.sm\:max-w-52   { max-width: 13rem; }
	.sm\:max-w-56   { max-width: 14rem; }
	.sm\:max-w-60   { max-width: 15rem; }
	.sm\:max-w-64   { max-width: 16rem; }
	.sm\:max-w-72   { max-width: 18rem; }
	.sm\:max-w-80   { max-width: 20rem; }
	.sm\:max-w-82   { max-width: 21.5rem; }
	.sm\:max-w-86   { max-width: 22rem; }
	.sm\:max-w-96   { max-width: 24rem; }
	.sm\:max-w-xs   { max-width: 320px; }
	.sm\:max-w-sm   { max-width: 640px; }
	.sm\:max-w-md   { max-width: 768px; }
	.sm\:max-w-lg   { max-width: 1024px; }
	.sm\:max-w-xl   { max-width: 1280px; }
	.sm\:max-w-2xl  { max-width: 1536px; }
	.sm\:max-w-3xl  { max-width: 1792px; }
	.sm\:max-w-4xl  { max-width: 2048px; }
	.sm\:max-w-5xl  { max-width: 2304px; }
	.sm\:max-w-6xl  { max-width: 2560px; }
	.sm\:max-w-7xl  { max-width: 2816px; }
	.sm\:max-w-full { max-width: 100%; }
	.sm\:max-w-fit  { max-width: fit-content; }

	/* Min Height */
	.sm\:min-h-0      { min-height: 0; }
	.sm\:min-h-4      { min-height: 1rem; }
	.sm\:min-h-5      { min-height: 1.25rem; }
	.sm\:min-h-6      { min-height: 1.5rem; }
	.sm\:min-h-8      { min-height: 2rem; }
	.sm\:min-h-10     { min-height: 2.5rem; }
	.sm\:min-h-12     { min-height: 3rem; }
	.sm\:min-h-14     { min-height: 3.5rem; }
	.sm\:min-h-16     { min-height: 4rem; }
	.sm\:min-h-20     { min-height: 5rem; }
	.sm\:min-h-24     { min-height: 6rem; }
	.sm\:min-h-28     { min-height: 7rem; }
	.sm\:min-h-32     { min-height: 8rem; }
	.sm\:min-h-36     { min-height: 9rem; }
	.sm\:min-h-40     { min-height: 10rem; }
	.sm\:min-h-44     { min-height: 11rem; }
	.sm\:min-h-48     { min-height: 12rem; }
	.sm\:min-h-52     { min-height: 13rem; }
	.sm\:min-h-56     { min-height: 14rem; }
	.sm\:min-h-60     { min-height: 15rem; }
	.sm\:min-h-64     { min-height: 16rem; }
	.sm\:min-h-72     { min-height: 18rem; }
	.sm\:min-h-80     { min-height: 20rem; }
	.sm\:min-h-96     { min-height: 24rem; }
	.sm\:min-h-full   { min-height: 100%; }
	.sm\:min-h-screen { min-height: 100vh; }
	.sm\:min-h-fit    { min-height: fit-content; }

	/* Max Height */
	.sm\:max-h-none   { max-height: none; }
	.sm\:max-h-xxs    { max-height: 120px; }
	.sm\:max-h-xs     { max-height: 200px; }
	.sm\:max-h-sm     { max-height: 300px; }
	.sm\:max-h-md     { max-height: 400px; }
	.sm\:max-h-lg     { max-height: 500px; }
	.sm\:max-h-xl     { max-height: 600px; }
	.sm\:max-h-2xl    { max-height: 800px; }
	.sm\:max-h-full   { max-height: 100%; }
	.sm\:max-h-screen { max-height: 100vh; }
	.sm\:max-h-fit    { max-height: fit-content; }
	.sm\:max-h-0      { max-height: 0; }
	.sm\:max-h-4      { max-height: 1rem; }
	.sm\:max-h-5      { max-height: 1.25rem; }
	.sm\:max-h-6      { max-height: 1.5rem; }
	.sm\:max-h-8      { max-height: 2rem; }
	.sm\:max-h-10     { max-height: 2.5rem; }
	.sm\:max-h-12     { max-height: 3rem; }
	.sm\:max-h-14     { max-height: 3.5rem; }
	.sm\:max-h-16     { max-height: 4rem; }
	.sm\:max-h-20     { max-height: 5rem; }
	.sm\:max-h-24     { max-height: 6rem; }
	.sm\:max-h-28     { max-height: 7rem; }
	.sm\:max-h-32     { max-height: 8rem; }
	.sm\:max-h-36     { max-height: 9rem; }
	.sm\:max-h-40     { max-height: 10rem; }
	.sm\:max-h-44     { max-height: 11rem; }
	.sm\:max-h-48     { max-height: 12rem; }
	.sm\:max-h-52     { max-height: 13rem; }
	.sm\:max-h-56     { max-height: 14rem; }
	.sm\:max-h-60     { max-height: 15rem; }
	.sm\:max-h-64     { max-height: 16rem; }
	.sm\:max-h-72     { max-height: 18rem; }
	.sm\:max-h-80     { max-height: 20rem; }
	.sm\:max-h-96     { max-height: 24rem; }

	/* Size */
	.sm\:size-4    { width: 1rem;    height: 1rem; }
	.sm\:size-5    { width: 1.25rem; height: 1.25rem; }
	.sm\:size-6    { width: 1.5rem;  height: 1.5rem; }
	.sm\:size-8    { width: 2rem;    height: 2rem; }
	.sm\:size-10   { width: 2.5rem;  height: 2.5rem; }
	.sm\:size-12   { width: 3rem;    height: 3rem; }
	.sm\:size-14   { width: 3.5rem;  height: 3.5rem; }
	.sm\:size-16   { width: 4rem;    height: 4rem; }
	.sm\:size-18   { width: 4.25rem;    height: 4.25rem; }
	.sm\:size-20   { width: 5rem;    height: 5rem; }
	.sm\:size-24   { width: 6rem;    height: 6rem; }
	.sm\:size-32   { width: 8rem;    height: 8rem; }
	.sm\:size-40   { width: 10rem;   height: 10rem; }
	.sm\:size-48   { width: 12rem;   height: 12rem; }
	.sm\:size-full  { width: 100%;   height: 100%; }

	/* Align Items */
	.sm\:items-start    { align-items: flex-start; }
	.sm\:items-center   { align-items: center; }
	.sm\:items-end      { align-items: flex-end; }
	.sm\:items-stretch  { align-items: stretch; }
	.sm\:items-baseline { align-items: baseline; }

	/* Justify Content */
	.sm\:justify-start   { justify-content: flex-start; }
	.sm\:justify-center  { justify-content: center; }
	.sm\:justify-end     { justify-content: flex-end; }
	.sm\:justify-between { justify-content: space-between; }
	.sm\:justify-around  { justify-content: space-around; }
	.sm\:justify-evenly  { justify-content: space-evenly; }

	/* Align Self */
	.sm\:self-auto    { align-self: auto; }
	.sm\:self-start   { align-self: flex-start; }
	.sm\:self-center  { align-self: center; }
	.sm\:self-end     { align-self: flex-end; }
	.sm\:self-stretch { align-self: stretch; }

	/* Padding */
	.sm\:p-none  { padding: 0 !important; }
	.sm\:p-xs    { padding: var(--space-xs); }
	.sm\:p-sm    { padding: var(--space-sm); }
	.sm\:p-md    { padding: var(--space-md); }
	.sm\:p-lg    { padding: var(--space-lg); }
	.sm\:p-xl    { padding: var(--space-xl); }
	.sm\:p-2xl   { padding: var(--space-2xl); }
	.sm\:px-none { padding-left: 0 !important; padding-right: 0 !important; }
	.sm\:px-xs   { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
	.sm\:px-sm   { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
	.sm\:px-md   { padding-left: var(--space-md);  padding-right: var(--space-md); }
	.sm\:px-lg   { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
	.sm\:px-xl   { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
	.sm\:px-2xl  { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
	.sm\:py-none { padding-top: 0 !important; padding-bottom: 0 !important; }
	.sm\:py-xs   { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
	.sm\:py-sm   { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
	.sm\:py-md   { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
	.sm\:py-lg   { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
	.sm\:py-xl   { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
	.sm\:py-2xl  { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

	/* Vertical spacing (space-y) */
	.sm\:space-y-xs  > * + * { margin-top: var(--space-xs); }
	.sm\:space-y-sm  > * + * { margin-top: var(--space-sm); }
	.sm\:space-y-md  > * + * { margin-top: var(--space-md); }
	.sm\:space-y-lg  > * + * { margin-top: var(--space-lg); }
	.sm\:space-y-xl  > * + * { margin-top: var(--space-xl); }
	.sm\:space-y-2xl > * + * { margin-top: var(--space-2xl); }

	/* Horizontal spacing (space-x) */
	.sm\:space-x-xs  > * + * { margin-left: var(--space-xs); }
	.sm\:space-x-sm  > * + * { margin-left: var(--space-sm); }
	.sm\:space-x-md  > * + * { margin-left: var(--space-md); }
	.sm\:space-x-lg  > * + * { margin-left: var(--space-lg); }
	.sm\:space-x-xl  > * + * { margin-left: var(--space-xl); }
	.sm\:space-x-2xl > * + * { margin-left: var(--space-2xl); }
}

/* ── md  (768px+) ──────────────────────── */
@media (min-width: 768px) {

	/* Display */
	.md\:hidden       { display: none; }
	.md\:block        { display: block; }
	.md\:inline-block { display: inline-block; }
	.md\:flex         { display: flex; }
	.md\:grid         { display: grid; }

	/* Grid columns */
	.grid.md\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid.md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid.md\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.grid.md\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.grid.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

	/* Flex direction + wrap */
	.flex.md\:flex-row    { flex-direction: row; }
	.flex.md\:flex-col    { flex-direction: column; }
	.flex.md\:flex-nowrap { flex-wrap: nowrap; }

	/* Flex Gap */
	.flex.md\:gap-none { gap: 0; }
	.flex.md\:gap-xs   { gap: var(--space-xs); }
	.flex.md\:gap-sm   { gap: var(--space-sm); }
	.flex.md\:gap-md   { gap: var(--space-md); }
	.flex.md\:gap-lg   { gap: var(--space-lg); }
	.flex.md\:gap-xl   { gap: var(--space-xl); }
	.flex.md\:gap-2xl  { gap: var(--space-2xl); }

	/* Grid Gap */
	.grid.md\:gap-none { gap: 0; }
	.grid.md\:gap-xs   { gap: var(--space-xs); }
	.grid.md\:gap-sm   { gap: var(--space-sm); }
	.grid.md\:gap-md   { gap: var(--space-md); }
	.grid.md\:gap-lg   { gap: var(--space-lg); }
	.grid.md\:gap-xl   { gap: var(--space-xl); }
	.grid.md\:gap-2xl  { gap: var(--space-2xl); }

	/* Width */
	.md\:w-full  { width: 100%; }
	.md\:w-auto  { width: auto; }
	.md\:w-1\/2  { width: 50%; }
	.md\:w-1\/3  { width: 33.333%; }
	.md\:w-2\/3  { width: 66.666%; }
	.md\:w-1\/4  { width: 25%; }
	.md\:w-3\/4  { width: 75%; }

	/* Min Height */
	.md\:min-h-0      { min-height: 0; }
	.md\:min-h-4      { min-height: 1rem; }
	.md\:min-h-5      { min-height: 1.25rem; }
	.md\:min-h-6      { min-height: 1.5rem; }
	.md\:min-h-8      { min-height: 2rem; }
	.md\:min-h-10     { min-height: 2.5rem; }
	.md\:min-h-12     { min-height: 3rem; }
	.md\:min-h-14     { min-height: 3.5rem; }
	.md\:min-h-16     { min-height: 4rem; }
	.md\:min-h-20     { min-height: 5rem; }
	.md\:min-h-24     { min-height: 6rem; }
	.md\:min-h-28     { min-height: 7rem; }
	.md\:min-h-32     { min-height: 8rem; }
	.md\:min-h-36     { min-height: 9rem; }
	.md\:min-h-40     { min-height: 10rem; }
	.md\:min-h-44     { min-height: 11rem; }
	.md\:min-h-48     { min-height: 12rem; }
	.md\:min-h-52     { min-height: 13rem; }
	.md\:min-h-56     { min-height: 14rem; }
	.md\:min-h-60     { min-height: 15rem; }
	.md\:min-h-64     { min-height: 16rem; }
	.md\:min-h-72     { min-height: 18rem; }
	.md\:min-h-80     { min-height: 20rem; }
	.md\:min-h-96     { min-height: 24rem; }
	.md\:min-h-full   { min-height: 100%; }
	.md\:min-h-screen { min-height: 100vh; }
	.md\:min-h-fit    { min-height: fit-content; }

	/* Max Height */
	.md\:max-h-none   { max-height: none; }
	.md\:max-h-xxs    { max-height: 120px; }
	.md\:max-h-xs     { max-height: 200px; }
	.md\:max-h-sm     { max-height: 300px; }
	.md\:max-h-md     { max-height: 400px; }
	.md\:max-h-lg     { max-height: 500px; }
	.md\:max-h-xl     { max-height: 600px; }
	.md\:max-h-2xl    { max-height: 800px; }
	.md\:max-h-full   { max-height: 100%; }
	.md\:max-h-screen { max-height: 100vh; }
	.md\:max-h-fit    { max-height: fit-content; }
	.md\:max-h-0      { max-height: 0; }
	.md\:max-h-4      { max-height: 1rem; }
	.md\:max-h-5      { max-height: 1.25rem; }
	.md\:max-h-6      { max-height: 1.5rem; }
	.md\:max-h-8      { max-height: 2rem; }
	.md\:max-h-10     { max-height: 2.5rem; }
	.md\:max-h-12     { max-height: 3rem; }
	.md\:max-h-14     { max-height: 3.5rem; }
	.md\:max-h-16     { max-height: 4rem; }
	.md\:max-h-20     { max-height: 5rem; }
	.md\:max-h-24     { max-height: 6rem; }
	.md\:max-h-28     { max-height: 7rem; }
	.md\:max-h-32     { max-height: 8rem; }
	.md\:max-h-36     { max-height: 9rem; }
	.md\:max-h-40     { max-height: 10rem; }
	.md\:max-h-44     { max-height: 11rem; }
	.md\:max-h-48     { max-height: 12rem; }
	.md\:max-h-52     { max-height: 13rem; }
	.md\:max-h-56     { max-height: 14rem; }
	.md\:max-h-60     { max-height: 15rem; }
	.md\:max-h-64     { max-height: 16rem; }
	.md\:max-h-72     { max-height: 18rem; }
	.md\:max-h-80     { max-height: 20rem; }
	.md\:max-h-96     { max-height: 24rem; }

	/* Text size */
	.md\:text-xxs  { font-size: var(--text-xxs); }
	.md\:text-xs   { font-size: var(--text-xs); }
	.md\:text-sm   { font-size: var(--text-sm); }
	.md\:text      { font-size: var(--text-base); }
	.md\:text-lg   { font-size: var(--text-lg); }
	.md\:text-xl   { font-size: var(--text-xl); }
	.md\:text-2xl  { font-size: var(--text-2xl); }
	.md\:text-3xl  { font-size: var(--text-3xl); }
	.md\:text-4xl  { font-size: var(--text-4xl); }

	/* Text alignment */
	.md\:text-left   { text-align: left; }
	.md\:text-center { text-align: center; }
	.md\:text-right  { text-align: right; }

	/* Font weight */
	.md\:font-light    { font-weight: var(--font-light); }
	.md\:font-normal   { font-weight: var(--font-normal); }
	.md\:font-medium   { font-weight: var(--font-medium); }
	.md\:font-semibold { font-weight: var(--font-semibold); }
	.md\:font-bold     { font-weight: var(--font-bold); }
	.md\:font-black    { font-weight: var(--font-black); }

	/* Line height */
	.md\:leading-none    { line-height: 1; }
	.md\:leading-tight   { line-height: 1.25; }
	.md\:leading-snug    { line-height: 1.375; }
	.md\:leading-normal  { line-height: 1.5; }
	.md\:leading-relaxed { line-height: 1.625; }
	.md\:leading-loose   { line-height: 2; }

	/* Letter spacing */
	.md\:tracking-tighter { letter-spacing: -0.05em; }
	.md\:tracking-tight   { letter-spacing: -0.025em; }
	.md\:tracking-normal  { letter-spacing: 0; }
	.md\:tracking-wide    { letter-spacing: 0.025em; }
	.md\:tracking-wider   { letter-spacing: 0.05em; }
	.md\:tracking-widest  { letter-spacing: 0.1em; }

	/* Flex children */
	.md\:flex-1    { flex: 1 1 0%; }
	.md\:flex-auto { flex: 1 1 auto; }
	.md\:flex-none { flex: none; }
	.md\:grow      { flex-grow: 1; }
	.md\:grow-0    { flex-grow: 0; }
	.md\:shrink-0  { flex-shrink: 0; }

	/* Order */
	.md\:order-first { order: -9999; }
	.md\:order-last  { order: 9999; }
	.md\:order-none  { order: 0; }

	/* Column span */
	.md\:col-span-1    { grid-column: span 1 / span 1; }
	.md\:col-span-2    { grid-column: span 2 / span 2; }
	.md\:col-span-3    { grid-column: span 3 / span 3; }
	.md\:col-span-4    { grid-column: span 4 / span 4; }
	.md\:col-span-6    { grid-column: span 6 / span 6; }
	.md\:col-span-12   { grid-column: span 12 / span 12; }
	.md\:col-span-full { grid-column: 1 / -1; }

	/* Row span */
	.md\:row-span-1    { grid-row: span 1 / span 1; }
	.md\:row-span-2    { grid-row: span 2 / span 2; }
	.md\:row-span-3    { grid-row: span 3 / span 3; }
	.md\:row-span-4    { grid-row: span 4 / span 4; }
	.md\:row-span-6    { grid-row: span 6 / span 6; }
	.md\:row-span-full { grid-row: 1 / -1; }

	/* Padding (for edge cases — clamp() handles most responsive padding already) */
	.md\:p-none  { padding: 0 !important; }
	.md\:p-xs    { padding: var(--space-xs); }
	.md\:p-sm    { padding: var(--space-sm); }
	.md\:p-md    { padding: var(--space-md); }
	.md\:p-lg    { padding: var(--space-lg); }
	.md\:p-xl    { padding: var(--space-xl); }
	.md\:p-2xl   { padding: var(--space-2xl); }
	.md\:px-none { padding-left: 0 !important; padding-right: 0 !important; }
	.md\:px-xs   { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
	.md\:px-sm   { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
	.md\:px-md   { padding-left: var(--space-md);  padding-right: var(--space-md); }
	.md\:px-lg   { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
	.md\:px-xl   { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
	.md\:px-2xl  { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
	.md\:py-none { padding-top: 0 !important; padding-bottom: 0 !important; }
	.md\:py-xs   { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
	.md\:py-sm   { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
	.md\:py-md   { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
	.md\:py-lg   { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
	.md\:py-xl   { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
	.md\:py-2xl  { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

	/* Vertical spacing (space-y) */
	.md\:space-y-xs  > * + * { margin-top: var(--space-xs); }
	.md\:space-y-sm  > * + * { margin-top: var(--space-sm); }
	.md\:space-y-md  > * + * { margin-top: var(--space-md); }
	.md\:space-y-lg  > * + * { margin-top: var(--space-lg); }
	.md\:space-y-xl  > * + * { margin-top: var(--space-xl); }
	.md\:space-y-2xl > * + * { margin-top: var(--space-2xl); }

	/* Horizontal spacing (space-x) */
	.md\:space-x-xs  > * + * { margin-left: var(--space-xs); }
	.md\:space-x-sm  > * + * { margin-left: var(--space-sm); }
	.md\:space-x-md  > * + * { margin-left: var(--space-md); }
	.md\:space-x-lg  > * + * { margin-left: var(--space-lg); }
	.md\:space-x-xl  > * + * { margin-left: var(--space-xl); }
	.md\:space-x-2xl > * + * { margin-left: var(--space-2xl); }

	/* Margin — top / bottom */
	.md\:mt-none { margin-top: 0; }       .md\:mb-none { margin-bottom: 0; }
	.md\:mt-auto { margin-top: auto; }    .md\:mb-auto { margin-bottom: auto; }
	.md\:mt-xs   { margin-top: var(--space-xs); }  .md\:mb-xs   { margin-bottom: var(--space-xs); }
	.md\:mt-sm   { margin-top: var(--space-sm); }  .md\:mb-sm   { margin-bottom: var(--space-sm); }
	.md\:mt-md   { margin-top: var(--space-md); }  .md\:mb-md   { margin-bottom: var(--space-md); }
	.md\:mt-lg   { margin-top: var(--space-lg); }  .md\:mb-lg   { margin-bottom: var(--space-lg); }
	.md\:mt-xl   { margin-top: var(--space-xl); }  .md\:mb-xl   { margin-bottom: var(--space-xl); }
	.md\:mt-2xl  { margin-top: var(--space-2xl); } .md\:mb-2xl  { margin-bottom: var(--space-2xl); }

	/* Margin — left / right */
	.md\:ml-none { margin-left: 0; }      .md\:mr-none { margin-right: 0; }
	.md\:ml-auto { margin-left: auto; }   .md\:mr-auto { margin-right: auto; }
	.md\:ml-xs   { margin-left: var(--space-xs); }  .md\:mr-xs   { margin-right: var(--space-xs); }
	.md\:ml-sm   { margin-left: var(--space-sm); }  .md\:mr-sm   { margin-right: var(--space-sm); }
	.md\:ml-md   { margin-left: var(--space-md); }  .md\:mr-md   { margin-right: var(--space-md); }
	.md\:ml-lg   { margin-left: var(--space-lg); }  .md\:mr-lg   { margin-right: var(--space-lg); }
	.md\:ml-xl   { margin-left: var(--space-xl); }  .md\:mr-xl   { margin-right: var(--space-xl); }
	.md\:ml-2xl  { margin-left: var(--space-2xl); } .md\:mr-2xl  { margin-right: var(--space-2xl); }

	/* Margin — axis */
	.md\:mx-auto { margin-left: auto;           margin-right: auto; }
	.md\:mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
	.md\:mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
	.md\:mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
	.md\:mx-lg   { margin-left: var(--space-lg); margin-right: var(--space-lg); }
	.md\:mx-xl   { margin-left: var(--space-xl); margin-right: var(--space-xl); }
	.md\:mx-2xl  { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
	.md\:my-auto { margin-top: auto;            margin-bottom: auto; }
	.md\:my-xs   { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
	.md\:my-sm   { margin-top: var(--space-sm);  margin-bottom: var(--space-sm); }
	.md\:my-md   { margin-top: var(--space-md);  margin-bottom: var(--space-md); }
	.md\:my-lg   { margin-top: var(--space-lg);  margin-bottom: var(--space-lg); }
	.md\:my-xl   { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
	.md\:my-2xl  { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }

	/* Negative margin — top / bottom */
	.md\:-mt-xs   { margin-top: calc(var(--space-xs) * -1); }  .md\:-mb-xs   { margin-bottom: calc(var(--space-xs) * -1); }
	.md\:-mt-sm   { margin-top: calc(var(--space-sm) * -1); }  .md\:-mb-sm   { margin-bottom: calc(var(--space-sm) * -1); }
	.md\:-mt-md   { margin-top: calc(var(--space-md) * -1); }  .md\:-mb-md   { margin-bottom: calc(var(--space-md) * -1); }
	.md\:-mt-lg   { margin-top: calc(var(--space-lg) * -1); }  .md\:-mb-lg   { margin-bottom: calc(var(--space-lg) * -1); }
	.md\:-mt-xl   { margin-top: calc(var(--space-xl) * -1); }  .md\:-mb-xl   { margin-bottom: calc(var(--space-xl) * -1); }
	.md\:-mt-2xl  { margin-top: calc(var(--space-2xl) * -1); } .md\:-mb-2xl  { margin-bottom: calc(var(--space-2xl) * -1); }

	/* Negative margin — left / right */
	.md\:-ml-xs   { margin-left: calc(var(--space-xs) * -1); }  .md\:-mr-xs   { margin-right: calc(var(--space-xs) * -1); }
	.md\:-ml-sm   { margin-left: calc(var(--space-sm) * -1); }  .md\:-mr-sm   { margin-right: calc(var(--space-sm) * -1); }
	.md\:-ml-md   { margin-left: calc(var(--space-md) * -1); }  .md\:-mr-md   { margin-right: calc(var(--space-md) * -1); }
	.md\:-ml-lg   { margin-left: calc(var(--space-lg) * -1); }  .md\:-mr-lg   { margin-right: calc(var(--space-lg) * -1); }
	.md\:-ml-xl   { margin-left: calc(var(--space-xl) * -1); }  .md\:-mr-xl   { margin-right: calc(var(--space-xl) * -1); }
	.md\:-ml-2xl  { margin-left: calc(var(--space-2xl) * -1); } .md\:-mr-2xl  { margin-right: calc(var(--space-2xl) * -1); }

	/* Negative margin — axis */
	.md\:-mx-xs   { margin-left: calc(var(--space-xs) * -1); margin-right: calc(var(--space-xs) * -1); }
	.md\:-mx-sm   { margin-left: calc(var(--space-sm) * -1); margin-right: calc(var(--space-sm) * -1); }
	.md\:-mx-md   { margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); }
	.md\:-mx-lg   { margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1); }
	.md\:-my-xs   { margin-top: calc(var(--space-xs) * -1);  margin-bottom: calc(var(--space-xs) * -1); }
	.md\:-my-sm   { margin-top: calc(var(--space-sm) * -1);  margin-bottom: calc(var(--space-sm) * -1); }
	.md\:-my-md   { margin-top: calc(var(--space-md) * -1);  margin-bottom: calc(var(--space-md) * -1); }
	.md\:-my-lg   { margin-top: calc(var(--space-lg) * -1);  margin-bottom: calc(var(--space-lg) * -1); }

	/* Position offsets — positive */
	.md\:top-0     { top: 0; }              .md\:bottom-0   { bottom: 0; }
	.md\:top-xs    { top: var(--space-xs); }    .md\:bottom-xs  { bottom: var(--space-xs); }
	.md\:top-sm    { top: var(--space-sm); }    .md\:bottom-sm  { bottom: var(--space-sm); }
	.md\:top-md    { top: var(--space-md); }    .md\:bottom-md  { bottom: var(--space-md); }
	.md\:top-lg    { top: var(--space-lg); }    .md\:bottom-lg  { bottom: var(--space-lg); }
	.md\:top-xl    { top: var(--space-xl); }    .md\:bottom-xl  { bottom: var(--space-xl); }
	.md\:top-2xl   { top: var(--space-2xl); }   .md\:bottom-2xl { bottom: var(--space-2xl); }

	.md\:left-0    { left: 0; }             .md\:right-0    { right: 0; }
	.md\:left-xs   { left: var(--space-xs); }   .md\:right-xs   { right: var(--space-xs); }
	.md\:left-sm   { left: var(--space-sm); }   .md\:right-sm   { right: var(--space-sm); }
	.md\:left-md   { left: var(--space-md); }   .md\:right-md   { right: var(--space-md); }
	.md\:left-lg   { left: var(--space-lg); }   .md\:right-lg   { right: var(--space-lg); }
	.md\:left-xl   { left: var(--space-xl); }   .md\:right-xl   { right: var(--space-xl); }
	.md\:left-2xl  { left: var(--space-2xl); }  .md\:right-2xl  { right: var(--space-2xl); }

	/* Position offsets — negative */
	.md\:-top-xs    { top: calc(var(--space-xs) * -1); }    .md\:-bottom-xs  { bottom: calc(var(--space-xs) * -1); }
	.md\:-top-sm    { top: calc(var(--space-sm) * -1); }    .md\:-bottom-sm  { bottom: calc(var(--space-sm) * -1); }
	.md\:-top-md    { top: calc(var(--space-md) * -1); }    .md\:-bottom-md  { bottom: calc(var(--space-md) * -1); }
	.md\:-top-lg    { top: calc(var(--space-lg) * -1); }    .md\:-bottom-lg  { bottom: calc(var(--space-lg) * -1); }
	.md\:-top-xl    { top: calc(var(--space-xl) * -1); }    .md\:-bottom-xl  { bottom: calc(var(--space-xl) * -1); }
	.md\:-top-2xl   { top: calc(var(--space-2xl) * -1); }   .md\:-bottom-2xl { bottom: calc(var(--space-2xl) * -1); }

	.md\:-left-xs   { left: calc(var(--space-xs) * -1); }   .md\:-right-xs   { right: calc(var(--space-xs) * -1); }
	.md\:-left-sm   { left: calc(var(--space-sm) * -1); }   .md\:-right-sm   { right: calc(var(--space-sm) * -1); }
	.md\:-left-md   { left: calc(var(--space-md) * -1); }   .md\:-right-md   { right: calc(var(--space-md) * -1); }
	.md\:-left-lg   { left: calc(var(--space-lg) * -1); }   .md\:-right-lg   { right: calc(var(--space-lg) * -1); }
	.md\:-left-xl   { left: calc(var(--space-xl) * -1); }   .md\:-right-xl   { right: calc(var(--space-xl) * -1); }
	.md\:-left-2xl  { left: calc(var(--space-2xl) * -1); }  .md\:-right-2xl  { right: calc(var(--space-2xl) * -1); }

	/* Min Width */
	.md\:min-w-0    { min-width: 0; }
	.md\:min-w-4    { min-width: 1rem; }
	.md\:min-w-8    { min-width: 2rem; }
	.md\:min-w-12   { min-width: 3rem; }
	.md\:min-w-16   { min-width: 4rem; }
	.md\:min-w-20   { min-width: 5rem; }
	.md\:min-w-24   { min-width: 6rem; }
	.md\:min-w-32   { min-width: 8rem; }
	.md\:min-w-40   { min-width: 10rem; }
	.md\:min-w-48   { min-width: 12rem; }
	.md\:min-w-56   { min-width: 14rem; }
	.md\:min-w-64   { min-width: 16rem; }
	.md\:min-w-72   { min-width: 18rem; }
	.md\:min-w-80   { min-width: 20rem; }
	.md\:min-w-96   { min-width: 24rem; }
	.md\:min-w-full { min-width: 100%; }

	/* Max Width */
	.md\:max-w-none { max-width: none; }
	.md\:max-w-3    { max-width: 0.75rem; }
	.md\:max-w-4    { max-width: 1rem; }
	.md\:max-w-5    { max-width: 1.25rem; }
	.md\:max-w-6    { max-width: 1.5rem; }
	.md\:max-w-8    { max-width: 2rem; }
	.md\:max-w-10   { max-width: 2.5rem; }
	.md\:max-w-12   { max-width: 3rem; }
	.md\:max-w-14   { max-width: 3.5rem; }
	.md\:max-w-16   { max-width: 4rem; }
	.md\:max-w-20   { max-width: 5rem; }
	.md\:max-w-24   { max-width: 6rem; }
	.md\:max-w-28   { max-width: 7rem; }
	.md\:max-w-32   { max-width: 8rem; }
	.md\:max-w-36   { max-width: 9rem; }
	.md\:max-w-40   { max-width: 10rem; }
	.md\:max-w-44   { max-width: 11rem; }
	.md\:max-w-48   { max-width: 12rem; }
	.md\:max-w-52   { max-width: 13rem; }
	.md\:max-w-56   { max-width: 14rem; }
	.md\:max-w-60   { max-width: 15rem; }
	.md\:max-w-64   { max-width: 16rem; }
	.md\:max-w-72   { max-width: 18rem; }
	.md\:max-w-80   { max-width: 20rem; }
	.md\:max-w-82   { max-width: 21.5rem; }
	.md\:max-w-86   { max-width: 22rem; }
	.md\:max-w-96   { max-width: 24rem; }
	.md\:max-w-xs   { max-width: 320px; }
	.md\:max-w-sm   { max-width: 640px; }
	.md\:max-w-md   { max-width: 768px; }
	.md\:max-w-lg   { max-width: 1024px; }
	.md\:max-w-xl   { max-width: 1280px; }
	.md\:max-w-2xl  { max-width: 1536px; }
	.md\:max-w-3xl  { max-width: 1792px; }
	.md\:max-w-4xl  { max-width: 2048px; }
	.md\:max-w-5xl  { max-width: 2304px; }
	.md\:max-w-6xl  { max-width: 2560px; }
	.md\:max-w-7xl  { max-width: 2816px; }
	.md\:max-w-full { max-width: 100%; }
	.md\:max-w-fit  { max-width: fit-content; }

	/* Size */
	.md\:size-4    { width: 1rem;    height: 1rem; }
	.md\:size-5    { width: 1.25rem; height: 1.25rem; }
	.md\:size-6    { width: 1.5rem;  height: 1.5rem; }
	.md\:size-8    { width: 2rem;    height: 2rem; }
	.md\:size-10   { width: 2.5rem;  height: 2.5rem; }
	.md\:size-12   { width: 3rem;    height: 3rem; }
	.md\:size-14   { width: 3.5rem;  height: 3.5rem; }
	.md\:size-16   { width: 4rem;    height: 4rem; }
	.md\:size-18   { width: 4.25rem;    height: 4.25rem; }
	.md\:size-20   { width: 5rem;    height: 5rem; }
	.md\:size-24   { width: 6rem;    height: 6rem; }
	.md\:size-32   { width: 8rem;    height: 8rem; }
	.md\:size-40   { width: 10rem;   height: 10rem; }
	.md\:size-48   { width: 12rem;   height: 12rem; }
	.md\:size-full  { width: 100%;   height: 100%; }

	/* Overflow */
	.md\:overflow-auto    { overflow: auto; }
	.md\:overflow-hidden  { overflow: hidden; }
	.md\:overflow-visible { overflow: visible; }
	.md\:overflow-scroll  { overflow: scroll; }
	.md\:overflow-x-auto   { overflow-x: auto; }
	.md\:overflow-x-hidden { overflow-x: hidden; }
	.md\:overflow-y-auto   { overflow-y: auto; }
	.md\:overflow-y-hidden { overflow-y: hidden; }

	/* Opacity */
	.md\:opacity-0   { opacity: 0; }
	.md\:opacity-25  { opacity: 0.25; }
	.md\:opacity-50  { opacity: 0.50; }
	.md\:opacity-75  { opacity: 0.75; }
	.md\:opacity-100 { opacity: 1; }

	/* Visibility */
	.md\:visible   { visibility: visible; }
	.md\:invisible { visibility: hidden; }

	/* Align Items */
	.md\:items-start    { align-items: flex-start; }
	.md\:items-center   { align-items: center; }
	.md\:items-end      { align-items: flex-end; }
	.md\:items-stretch  { align-items: stretch; }
	.md\:items-baseline { align-items: baseline; }

	/* Justify Content */
	.md\:justify-start   { justify-content: flex-start; }
	.md\:justify-center  { justify-content: center; }
	.md\:justify-end     { justify-content: flex-end; }
	.md\:justify-between { justify-content: space-between; }
	.md\:justify-around  { justify-content: space-around; }
	.md\:justify-evenly  { justify-content: space-evenly; }

	/* Align Self */
	.md\:self-auto    { align-self: auto; }
	.md\:self-start   { align-self: flex-start; }
	.md\:self-center  { align-self: center; }
	.md\:self-end     { align-self: flex-end; }
	.md\:self-stretch { align-self: stretch; }
}

/* ── lg  (1024px+) ──────────────────────── */
@media (min-width: 1024px) {

	/* Display */
	.lg\:hidden       { display: none; }
	.lg\:block        { display: block; }
	.lg\:inline-block { display: inline-block; }
	.lg\:flex         { display: flex; }
	.lg\:grid         { display: grid; }

	/* Grid columns */
	.grid.lg\:grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.grid.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

	/* Flex direction + wrap */
	.flex.lg\:flex-row    { flex-direction: row; }
	.flex.lg\:flex-col    { flex-direction: column; }
	.flex.lg\:flex-nowrap { flex-wrap: nowrap; }

	/* Flex Gap */
	.flex.lg\:gap-none { gap: 0; }
	.flex.lg\:gap-xs   { gap: var(--space-xs); }
	.flex.lg\:gap-sm   { gap: var(--space-sm); }
	.flex.lg\:gap-md   { gap: var(--space-md); }
	.flex.lg\:gap-lg   { gap: var(--space-lg); }
	.flex.lg\:gap-xl   { gap: var(--space-xl); }
	.flex.lg\:gap-2xl  { gap: var(--space-2xl); }

	/* Grid Gap */
	.grid.lg\:gap-none { gap: 0; }
	.grid.lg\:gap-xs   { gap: var(--space-xs); }
	.grid.lg\:gap-sm   { gap: var(--space-sm); }
	.grid.lg\:gap-md   { gap: var(--space-md); }
	.grid.lg\:gap-lg   { gap: var(--space-lg); }
	.grid.lg\:gap-xl   { gap: var(--space-xl); }
	.grid.lg\:gap-2xl  { gap: var(--space-2xl); }

	/* Width */
	.lg\:w-full  { width: 100%; }
	.lg\:w-auto  { width: auto; }
	.lg\:w-1\/2  { width: 50%; }
	.lg\:w-1\/3  { width: 33.333%; }
	.lg\:w-2\/3  { width: 66.666%; }
	.lg\:w-1\/4  { width: 25%; }
	.lg\:w-3\/4  { width: 75%; }

	/* Min Height */
	.lg\:min-h-0      { min-height: 0; }
	.lg\:min-h-4      { min-height: 1rem; }
	.lg\:min-h-5      { min-height: 1.25rem; }
	.lg\:min-h-6      { min-height: 1.5rem; }
	.lg\:min-h-8      { min-height: 2rem; }
	.lg\:min-h-10     { min-height: 2.5rem; }
	.lg\:min-h-12     { min-height: 3rem; }
	.lg\:min-h-14     { min-height: 3.5rem; }
	.lg\:min-h-16     { min-height: 4rem; }
	.lg\:min-h-20     { min-height: 5rem; }
	.lg\:min-h-24     { min-height: 6rem; }
	.lg\:min-h-28     { min-height: 7rem; }
	.lg\:min-h-32     { min-height: 8rem; }
	.lg\:min-h-36     { min-height: 9rem; }
	.lg\:min-h-40     { min-height: 10rem; }
	.lg\:min-h-44     { min-height: 11rem; }
	.lg\:min-h-48     { min-height: 12rem; }
	.lg\:min-h-52     { min-height: 13rem; }
	.lg\:min-h-56     { min-height: 14rem; }
	.lg\:min-h-60     { min-height: 15rem; }
	.lg\:min-h-64     { min-height: 16rem; }
	.lg\:min-h-72     { min-height: 18rem; }
	.lg\:min-h-80     { min-height: 20rem; }
	.lg\:min-h-96     { min-height: 24rem; }
	.lg\:min-h-full   { min-height: 100%; }
	.lg\:min-h-screen { min-height: 100vh; }
	.lg\:min-h-fit    { min-height: fit-content; }

	/* Max Height */
	.lg\:max-h-none   { max-height: none; }
	.lg\:max-h-xxs    { max-height: 120px; }
	.lg\:max-h-xs     { max-height: 200px; }
	.lg\:max-h-sm     { max-height: 300px; }
	.lg\:max-h-md     { max-height: 400px; }
	.lg\:max-h-lg     { max-height: 500px; }
	.lg\:max-h-xl     { max-height: 600px; }
	.lg\:max-h-2xl    { max-height: 800px; }
	.lg\:max-h-full   { max-height: 100%; }
	.lg\:max-h-screen { max-height: 100vh; }
	.lg\:max-h-fit    { max-height: fit-content; }
	.lg\:max-h-0      { max-height: 0; }
	.lg\:max-h-4      { max-height: 1rem; }
	.lg\:max-h-5      { max-height: 1.25rem; }
	.lg\:max-h-6      { max-height: 1.5rem; }
	.lg\:max-h-8      { max-height: 2rem; }
	.lg\:max-h-10     { max-height: 2.5rem; }
	.lg\:max-h-12     { max-height: 3rem; }
	.lg\:max-h-14     { max-height: 3.5rem; }
	.lg\:max-h-16     { max-height: 4rem; }
	.lg\:max-h-20     { max-height: 5rem; }
	.lg\:max-h-24     { max-height: 6rem; }
	.lg\:max-h-28     { max-height: 7rem; }
	.lg\:max-h-32     { max-height: 8rem; }
	.lg\:max-h-36     { max-height: 9rem; }
	.lg\:max-h-40     { max-height: 10rem; }
	.lg\:max-h-44     { max-height: 11rem; }
	.lg\:max-h-48     { max-height: 12rem; }
	.lg\:max-h-52     { max-height: 13rem; }
	.lg\:max-h-56     { max-height: 14rem; }
	.lg\:max-h-60     { max-height: 15rem; }
	.lg\:max-h-64     { max-height: 16rem; }
	.lg\:max-h-72     { max-height: 18rem; }
	.lg\:max-h-80     { max-height: 20rem; }
	.lg\:max-h-96     { max-height: 24rem; }

	/* Text size */
	.lg\:text-xxs  { font-size: var(--text-xxs); }
	.lg\:text-xs   { font-size: var(--text-xs); }
	.lg\:text-sm   { font-size: var(--text-sm); }
	.lg\:text      { font-size: var(--text-base); }
	.lg\:text-lg   { font-size: var(--text-lg); }
	.lg\:text-xl   { font-size: var(--text-xl); }
	.lg\:text-2xl  { font-size: var(--text-2xl); }
	.lg\:text-3xl  { font-size: var(--text-3xl); }
	.lg\:text-4xl  { font-size: var(--text-4xl); }

	/* Text alignment */
	.lg\:text-left   { text-align: left; }
	.lg\:text-center { text-align: center; }
	.lg\:text-right  { text-align: right; }

	/* Font weight */
	.lg\:font-light    { font-weight: var(--font-light); }
	.lg\:font-normal   { font-weight: var(--font-normal); }
	.lg\:font-medium   { font-weight: var(--font-medium); }
	.lg\:font-semibold { font-weight: var(--font-semibold); }
	.lg\:font-bold     { font-weight: var(--font-bold); }
	.lg\:font-black    { font-weight: var(--font-black); }

	/* Line height */
	.lg\:leading-none    { line-height: 1; }
	.lg\:leading-tight   { line-height: 1.25; }
	.lg\:leading-snug    { line-height: 1.375; }
	.lg\:leading-normal  { line-height: 1.5; }
	.lg\:leading-relaxed { line-height: 1.625; }
	.lg\:leading-loose   { line-height: 2; }

	/* Letter spacing */
	.lg\:tracking-tighter { letter-spacing: -0.05em; }
	.lg\:tracking-tight   { letter-spacing: -0.025em; }
	.lg\:tracking-normal  { letter-spacing: 0; }
	.lg\:tracking-wide    { letter-spacing: 0.025em; }
	.lg\:tracking-wider   { letter-spacing: 0.05em; }
	.lg\:tracking-widest  { letter-spacing: 0.1em; }

	/* Flex children */
	.lg\:flex-1    { flex: 1 1 0%; }
	.lg\:flex-auto { flex: 1 1 auto; }
	.lg\:flex-none { flex: none; }
	.lg\:grow      { flex-grow: 1; }
	.lg\:grow-0    { flex-grow: 0; }
	.lg\:shrink-0  { flex-shrink: 0; }

	/* Order */
	.lg\:order-first { order: -9999; }
	.lg\:order-last  { order: 9999; }
	.lg\:order-none  { order: 0; }

	/* Column span */
	.lg\:col-span-1    { grid-column: span 1 / span 1; }
	.lg\:col-span-2    { grid-column: span 2 / span 2; }
	.lg\:col-span-3    { grid-column: span 3 / span 3; }
	.lg\:col-span-4    { grid-column: span 4 / span 4; }
	.lg\:col-span-6    { grid-column: span 6 / span 6; }
	.lg\:col-span-12   { grid-column: span 12 / span 12; }
	.lg\:col-span-full { grid-column: 1 / -1; }

	/* Padding (for edge cases — clamp() handles most responsive padding already) */
	.lg\:p-none  { padding: 0 !important; }
	.lg\:p-xs    { padding: var(--space-xs); }
	.lg\:p-sm    { padding: var(--space-sm); }
	.lg\:p-md    { padding: var(--space-md); }
	.lg\:p-lg    { padding: var(--space-lg); }
	.lg\:p-xl    { padding: var(--space-xl); }
	.lg\:p-2xl   { padding: var(--space-2xl); }
	.lg\:px-none { padding-left: 0 !important; padding-right: 0 !important; }
	.lg\:px-xs   { padding-left: var(--space-xs);  padding-right: var(--space-xs); }
	.lg\:px-sm   { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
	.lg\:px-md   { padding-left: var(--space-md);  padding-right: var(--space-md); }
	.lg\:px-lg   { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
	.lg\:px-xl   { padding-left: var(--space-xl);  padding-right: var(--space-xl); }
	.lg\:px-2xl  { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
	.lg\:py-none { padding-top: 0 !important; padding-bottom: 0 !important; }
	.lg\:py-xs   { padding-top: var(--space-xs);  padding-bottom: var(--space-xs); }
	.lg\:py-sm   { padding-top: var(--space-sm);  padding-bottom: var(--space-sm); }
	.lg\:py-md   { padding-top: var(--space-md);  padding-bottom: var(--space-md); }
	.lg\:py-lg   { padding-top: var(--space-lg);  padding-bottom: var(--space-lg); }
	.lg\:py-xl   { padding-top: var(--space-xl);  padding-bottom: var(--space-xl); }
	.lg\:py-2xl  { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }

	/* Vertical spacing (space-y) */
	.lg\:space-y-xs  > * + * { margin-top: var(--space-xs); }
	.lg\:space-y-sm  > * + * { margin-top: var(--space-sm); }
	.lg\:space-y-md  > * + * { margin-top: var(--space-md); }
	.lg\:space-y-lg  > * + * { margin-top: var(--space-lg); }
	.lg\:space-y-xl  > * + * { margin-top: var(--space-xl); }
	.lg\:space-y-2xl > * + * { margin-top: var(--space-2xl); }

	/* Horizontal spacing (space-x) */
	.lg\:space-x-xs  > * + * { margin-left: var(--space-xs); }
	.lg\:space-x-sm  > * + * { margin-left: var(--space-sm); }
	.lg\:space-x-md  > * + * { margin-left: var(--space-md); }
	.lg\:space-x-lg  > * + * { margin-left: var(--space-lg); }
	.lg\:space-x-xl  > * + * { margin-left: var(--space-xl); }
	.lg\:space-x-2xl > * + * { margin-left: var(--space-2xl); }

	/* Margin — top / bottom */
	.lg\:mt-none { margin-top: 0; }       .lg\:mb-none { margin-bottom: 0; }
	.lg\:mt-auto { margin-top: auto; }    .lg\:mb-auto { margin-bottom: auto; }
	.lg\:mt-xs   { margin-top: var(--space-xs); }  .lg\:mb-xs   { margin-bottom: var(--space-xs); }
	.lg\:mt-sm   { margin-top: var(--space-sm); }  .lg\:mb-sm   { margin-bottom: var(--space-sm); }
	.lg\:mt-md   { margin-top: var(--space-md); }  .lg\:mb-md   { margin-bottom: var(--space-md); }
	.lg\:mt-lg   { margin-top: var(--space-lg); }  .lg\:mb-lg   { margin-bottom: var(--space-lg); }
	.lg\:mt-xl   { margin-top: var(--space-xl); }  .lg\:mb-xl   { margin-bottom: var(--space-xl); }
	.lg\:mt-2xl  { margin-top: var(--space-2xl); } .lg\:mb-2xl  { margin-bottom: var(--space-2xl); }

	/* Margin — left / right */
	.lg\:ml-none { margin-left: 0; }      .lg\:mr-none { margin-right: 0; }
	.lg\:ml-auto { margin-left: auto; }   .lg\:mr-auto { margin-right: auto; }
	.lg\:ml-xs   { margin-left: var(--space-xs); }  .lg\:mr-xs   { margin-right: var(--space-xs); }
	.lg\:ml-sm   { margin-left: var(--space-sm); }  .lg\:mr-sm   { margin-right: var(--space-sm); }
	.lg\:ml-md   { margin-left: var(--space-md); }  .lg\:mr-md   { margin-right: var(--space-md); }
	.lg\:ml-lg   { margin-left: var(--space-lg); }  .lg\:mr-lg   { margin-right: var(--space-lg); }
	.lg\:ml-xl   { margin-left: var(--space-xl); }  .lg\:mr-xl   { margin-right: var(--space-xl); }
	.lg\:ml-2xl  { margin-left: var(--space-2xl); } .lg\:mr-2xl  { margin-right: var(--space-2xl); }

	/* Margin — axis */
	.lg\:mx-auto { margin-left: auto;           margin-right: auto; }
	.lg\:mx-xs   { margin-left: var(--space-xs); margin-right: var(--space-xs); }
	.lg\:mx-sm   { margin-left: var(--space-sm); margin-right: var(--space-sm); }
	.lg\:mx-md   { margin-left: var(--space-md); margin-right: var(--space-md); }
	.lg\:mx-lg   { margin-left: var(--space-lg); margin-right: var(--space-lg); }
	.lg\:mx-xl   { margin-left: var(--space-xl); margin-right: var(--space-xl); }
	.lg\:mx-2xl  { margin-left: var(--space-2xl); margin-right: var(--space-2xl); }
	.lg\:my-auto { margin-top: auto;            margin-bottom: auto; }
	.lg\:my-xs   { margin-top: var(--space-xs);  margin-bottom: var(--space-xs); }
	.lg\:my-sm   { margin-top: var(--space-sm);  margin-bottom: var(--space-sm); }
	.lg\:my-md   { margin-top: var(--space-md);  margin-bottom: var(--space-md); }
	.lg\:my-lg   { margin-top: var(--space-lg);  margin-bottom: var(--space-lg); }
	.lg\:my-xl   { margin-top: var(--space-xl);  margin-bottom: var(--space-xl); }
	.lg\:my-2xl  { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); }

	/* Negative margin — top / bottom */
	.lg\:-mt-xs   { margin-top: calc(var(--space-xs) * -1); }  .lg\:-mb-xs   { margin-bottom: calc(var(--space-xs) * -1); }
	.lg\:-mt-sm   { margin-top: calc(var(--space-sm) * -1); }  .lg\:-mb-sm   { margin-bottom: calc(var(--space-sm) * -1); }
	.lg\:-mt-md   { margin-top: calc(var(--space-md) * -1); }  .lg\:-mb-md   { margin-bottom: calc(var(--space-md) * -1); }
	.lg\:-mt-lg   { margin-top: calc(var(--space-lg) * -1); }  .lg\:-mb-lg   { margin-bottom: calc(var(--space-lg) * -1); }
	.lg\:-mt-xl   { margin-top: calc(var(--space-xl) * -1); }  .lg\:-mb-xl   { margin-bottom: calc(var(--space-xl) * -1); }
	.lg\:-mt-2xl  { margin-top: calc(var(--space-2xl) * -1); } .lg\:-mb-2xl  { margin-bottom: calc(var(--space-2xl) * -1); }

	/* Negative margin — left / right */
	.lg\:-ml-xs   { margin-left: calc(var(--space-xs) * -1); }  .lg\:-mr-xs   { margin-right: calc(var(--space-xs) * -1); }
	.lg\:-ml-sm   { margin-left: calc(var(--space-sm) * -1); }  .lg\:-mr-sm   { margin-right: calc(var(--space-sm) * -1); }
	.lg\:-ml-md   { margin-left: calc(var(--space-md) * -1); }  .lg\:-mr-md   { margin-right: calc(var(--space-md) * -1); }
	.lg\:-ml-lg   { margin-left: calc(var(--space-lg) * -1); }  .lg\:-mr-lg   { margin-right: calc(var(--space-lg) * -1); }
	.lg\:-ml-xl   { margin-left: calc(var(--space-xl) * -1); }  .lg\:-mr-xl   { margin-right: calc(var(--space-xl) * -1); }
	.lg\:-ml-2xl  { margin-left: calc(var(--space-2xl) * -1); } .lg\:-mr-2xl  { margin-right: calc(var(--space-2xl) * -1); }

	/* Negative margin — axis */
	.lg\:-mx-xs   { margin-left: calc(var(--space-xs) * -1); margin-right: calc(var(--space-xs) * -1); }
	.lg\:-mx-sm   { margin-left: calc(var(--space-sm) * -1); margin-right: calc(var(--space-sm) * -1); }
	.lg\:-mx-md   { margin-left: calc(var(--space-md) * -1); margin-right: calc(var(--space-md) * -1); }
	.lg\:-mx-lg   { margin-left: calc(var(--space-lg) * -1); margin-right: calc(var(--space-lg) * -1); }
	.lg\:-my-xs   { margin-top: calc(var(--space-xs) * -1);  margin-bottom: calc(var(--space-xs) * -1); }
	.lg\:-my-sm   { margin-top: calc(var(--space-sm) * -1);  margin-bottom: calc(var(--space-sm) * -1); }
	.lg\:-my-md   { margin-top: calc(var(--space-md) * -1);  margin-bottom: calc(var(--space-md) * -1); }
	.lg\:-my-lg   { margin-top: calc(var(--space-lg) * -1);  margin-bottom: calc(var(--space-lg) * -1); }

	/* Position offsets — positive */
	.lg\:top-0     { top: 0; }              .lg\:bottom-0   { bottom: 0; }
	.lg\:top-xs    { top: var(--space-xs); }    .lg\:bottom-xs  { bottom: var(--space-xs); }
	.lg\:top-sm    { top: var(--space-sm); }    .lg\:bottom-sm  { bottom: var(--space-sm); }
	.lg\:top-md    { top: var(--space-md); }    .lg\:bottom-md  { bottom: var(--space-md); }
	.lg\:top-lg    { top: var(--space-lg); }    .lg\:bottom-lg  { bottom: var(--space-lg); }
	.lg\:top-xl    { top: var(--space-xl); }    .lg\:bottom-xl  { bottom: var(--space-xl); }
	.lg\:top-2xl   { top: var(--space-2xl); }   .lg\:bottom-2xl { bottom: var(--space-2xl); }

	.lg\:left-0    { left: 0; }             .lg\:right-0    { right: 0; }
	.lg\:left-xs   { left: var(--space-xs); }   .lg\:right-xs   { right: var(--space-xs); }
	.lg\:left-sm   { left: var(--space-sm); }   .lg\:right-sm   { right: var(--space-sm); }
	.lg\:left-md   { left: var(--space-md); }   .lg\:right-md   { right: var(--space-md); }
	.lg\:left-lg   { left: var(--space-lg); }   .lg\:right-lg   { right: var(--space-lg); }
	.lg\:left-xl   { left: var(--space-xl); }   .lg\:right-xl   { right: var(--space-xl); }
	.lg\:left-2xl  { left: var(--space-2xl); }  .lg\:right-2xl  { right: var(--space-2xl); }

	/* Position offsets — negative */
	.lg\:-top-xs    { top: calc(var(--space-xs) * -1); }    .lg\:-bottom-xs  { bottom: calc(var(--space-xs) * -1); }
	.lg\:-top-sm    { top: calc(var(--space-sm) * -1); }    .lg\:-bottom-sm  { bottom: calc(var(--space-sm) * -1); }
	.lg\:-top-md    { top: calc(var(--space-md) * -1); }    .lg\:-bottom-md  { bottom: calc(var(--space-md) * -1); }
	.lg\:-top-lg    { top: calc(var(--space-lg) * -1); }    .lg\:-bottom-lg  { bottom: calc(var(--space-lg) * -1); }
	.lg\:-top-xl    { top: calc(var(--space-xl) * -1); }    .lg\:-bottom-xl  { bottom: calc(var(--space-xl) * -1); }
	.lg\:-top-2xl   { top: calc(var(--space-2xl) * -1); }   .lg\:-bottom-2xl { bottom: calc(var(--space-2xl) * -1); }

	.lg\:-left-xs   { left: calc(var(--space-xs) * -1); }   .lg\:-right-xs   { right: calc(var(--space-xs) * -1); }
	.lg\:-left-sm   { left: calc(var(--space-sm) * -1); }   .lg\:-right-sm   { right: calc(var(--space-sm) * -1); }
	.lg\:-left-md   { left: calc(var(--space-md) * -1); }   .lg\:-right-md   { right: calc(var(--space-md) * -1); }
	.lg\:-left-lg   { left: calc(var(--space-lg) * -1); }   .lg\:-right-lg   { right: calc(var(--space-lg) * -1); }
	.lg\:-left-xl   { left: calc(var(--space-xl) * -1); }   .lg\:-right-xl   { right: calc(var(--space-xl) * -1); }
	.lg\:-left-2xl  { left: calc(var(--space-2xl) * -1); }  .lg\:-right-2xl  { right: calc(var(--space-2xl) * -1); }

	/* Min Width */
	.lg\:min-w-0    { min-width: 0; }
	.lg\:min-w-4    { min-width: 1rem; }
	.lg\:min-w-8    { min-width: 2rem; }
	.lg\:min-w-12   { min-width: 3rem; }
	.lg\:min-w-16   { min-width: 4rem; }
	.lg\:min-w-20   { min-width: 5rem; }
	.lg\:min-w-24   { min-width: 6rem; }
	.lg\:min-w-32   { min-width: 8rem; }
	.lg\:min-w-40   { min-width: 10rem; }
	.lg\:min-w-48   { min-width: 12rem; }
	.lg\:min-w-56   { min-width: 14rem; }
	.lg\:min-w-64   { min-width: 16rem; }
	.lg\:min-w-72   { min-width: 18rem; }
	.lg\:min-w-80   { min-width: 20rem; }
	.lg\:min-w-96   { min-width: 24rem; }
	.lg\:min-w-full { min-width: 100%; }

	/* Max Width */
	.lg\:max-w-none { max-width: none; }
	.lg\:max-w-3    { max-width: 0.75rem; }
	.lg\:max-w-4    { max-width: 1rem; }
	.lg\:max-w-5    { max-width: 1.25rem; }
	.lg\:max-w-6    { max-width: 1.5rem; }
	.lg\:max-w-8    { max-width: 2rem; }
	.lg\:max-w-10   { max-width: 2.5rem; }
	.lg\:max-w-12   { max-width: 3rem; }
	.lg\:max-w-14   { max-width: 3.5rem; }
	.lg\:max-w-16   { max-width: 4rem; }
	.lg\:max-w-20   { max-width: 5rem; }
	.lg\:max-w-24   { max-width: 6rem; }
	.lg\:max-w-28   { max-width: 7rem; }
	.lg\:max-w-32   { max-width: 8rem; }
	.lg\:max-w-36   { max-width: 9rem; }
	.lg\:max-w-40   { max-width: 10rem; }
	.lg\:max-w-44   { max-width: 11rem; }
	.lg\:max-w-48   { max-width: 12rem; }
	.lg\:max-w-52   { max-width: 13rem; }
	.lg\:max-w-56   { max-width: 14rem; }
	.lg\:max-w-60   { max-width: 15rem; }
	.lg\:max-w-64   { max-width: 16rem; }
	.lg\:max-w-72   { max-width: 18rem; }
	.lg\:max-w-80   { max-width: 20rem; }
	.lg\:max-w-82   { max-width: 21.5rem; }
	.lg\:max-w-86   { max-width: 22rem; }
	.lg\:max-w-96   { max-width: 24rem; }
	.lg\:max-w-xs   { max-width: 320px; }
	.lg\:max-w-sm   { max-width: 640px; }
	.lg\:max-w-md   { max-width: 768px; }
	.lg\:max-w-lg   { max-width: 1024px; }
	.lg\:max-w-xl   { max-width: 1280px; }
	.lg\:max-w-2xl  { max-width: 1536px; }
	.lg\:max-w-3xl  { max-width: 1792px; }
	.lg\:max-w-4xl  { max-width: 2048px; }
	.lg\:max-w-5xl  { max-width: 2304px; }
	.lg\:max-w-6xl  { max-width: 2560px; }
	.lg\:max-w-7xl  { max-width: 2816px; }
	.lg\:max-w-full { max-width: 100%; }
	.lg\:max-w-fit  { max-width: fit-content; }

	/* Size */
	.lg\:size-4    { width: 1rem;    height: 1rem; }
	.lg\:size-5    { width: 1.25rem; height: 1.25rem; }
	.lg\:size-6    { width: 1.5rem;  height: 1.5rem; }
	.lg\:size-8    { width: 2rem;    height: 2rem; }
	.lg\:size-10   { width: 2.5rem;  height: 2.5rem; }
	.lg\:size-12   { width: 3rem;    height: 3rem; }
	.lg\:size-14   { width: 3.5rem;  height: 3.5rem; }
	.lg\:size-16   { width: 4rem;    height: 4rem; }
	.lg\:size-18   { width: 4.25rem;    height: 4.25rem; }
	.lg\:size-20   { width: 5rem;    height: 5rem; }
	.lg\:size-24   { width: 6rem;    height: 6rem; }
	.lg\:size-32   { width: 8rem;    height: 8rem; }
	.lg\:size-40   { width: 10rem;   height: 10rem; }
	.lg\:size-48   { width: 12rem;   height: 12rem; }
	.lg\:size-full  { width: 100%;   height: 100%; }

	/* Overflow */
	.lg\:overflow-auto    { overflow: auto; }
	.lg\:overflow-hidden  { overflow: hidden; }
	.lg\:overflow-visible { overflow: visible; }
	.lg\:overflow-scroll  { overflow: scroll; }
	.lg\:overflow-x-auto   { overflow-x: auto; }
	.lg\:overflow-x-hidden { overflow-x: hidden; }
	.lg\:overflow-y-auto   { overflow-y: auto; }
	.lg\:overflow-y-hidden { overflow-y: hidden; }

	/* Opacity */
	.lg\:opacity-0   { opacity: 0; }
	.lg\:opacity-25  { opacity: 0.25; }
	.lg\:opacity-50  { opacity: 0.50; }
	.lg\:opacity-75  { opacity: 0.75; }
	.lg\:opacity-100 { opacity: 1; }

	/* Visibility */
	.lg\:visible   { visibility: visible; }
	.lg\:invisible { visibility: hidden; }

	/* Align Items */
	.lg\:items-start    { align-items: flex-start; }
	.lg\:items-center   { align-items: center; }
	.lg\:items-end      { align-items: flex-end; }
	.lg\:items-stretch  { align-items: stretch; }
	.lg\:items-baseline { align-items: baseline; }

	/* Justify Content */
	.lg\:justify-start   { justify-content: flex-start; }
	.lg\:justify-center  { justify-content: center; }
	.lg\:justify-end     { justify-content: flex-end; }
	.lg\:justify-between { justify-content: space-between; }
	.lg\:justify-around  { justify-content: space-around; }
	.lg\:justify-evenly  { justify-content: space-evenly; }

	/* Align Self */
	.lg\:self-auto    { align-self: auto; }
	.lg\:self-start   { align-self: flex-start; }
	.lg\:self-center  { align-self: center; }
	.lg\:self-end     { align-self: flex-end; }
	.lg\:self-stretch { align-self: stretch; }
}

/* ── Background color utilities ─────────────── */
.bg-white        { background-color: #fff; }
.bg-black        { background-color: #000; }

/* Primary */
.bg-primary      { background-color: var(--primary-500); }
.bg-primary-50   { background-color: var(--primary-50); }
.bg-primary-100  { background-color: var(--primary-100); }
.bg-primary-200  { background-color: var(--primary-200); }
.bg-primary-300  { background-color: var(--primary-300); }
.bg-primary-400  { background-color: var(--primary-400); }
.bg-primary-500  { background-color: var(--primary-500); }
.bg-primary-600  { background-color: var(--primary-600); }
.bg-primary-700  { background-color: var(--primary-700); }
.bg-primary-800  { background-color: var(--primary-800); }
.bg-primary-900  { background-color: var(--primary-900); }

/* Accent */
.bg-accent      { background-color: var(--accent-500); }
.bg-accent-50   { background-color: var(--accent-50); }
.bg-accent-100  { background-color: var(--accent-100); }
.bg-accent-200  { background-color: var(--accent-200); }
.bg-accent-300  { background-color: var(--accent-300); }
.bg-accent-400  { background-color: var(--accent-400); }
.bg-accent-500  { background-color: var(--accent-500); }
.bg-accent-600  { background-color: var(--accent-600); }
.bg-accent-700  { background-color: var(--accent-700); }
.bg-accent-800  { background-color: var(--accent-800); }
.bg-accent-900  { background-color: var(--accent-900); }

/* Status */
.bg-success     { background-color: var(--success-500); }
.bg-success-50   { background-color: var(--success-50); }
.bg-success-100  { background-color: var(--success-100); }
.bg-success-200  { background-color: var(--success-200); }
.bg-success-300  { background-color: var(--success-300); }
.bg-success-400  { background-color: var(--success-400); }
.bg-success-500  { background-color: var(--success-500); }
.bg-success-600  { background-color: var(--success-600); }
.bg-success-700  { background-color: var(--success-700); }
.bg-success-800  { background-color: var(--success-800); }
.bg-success-900  { background-color: var(--success-900); }

.bg-warning     { background-color: var(--warning-500); }
.bg-warning-50   { background-color: var(--warning-50); }
.bg-warning-100  { background-color: var(--warning-100); }
.bg-warning-200  { background-color: var(--warning-200); }
.bg-warning-300  { background-color: var(--warning-300); }
.bg-warning-400  { background-color: var(--warning-400); }
.bg-warning-500  { background-color: var(--warning-500); }
.bg-warning-600  { background-color: var(--warning-600); }
.bg-warning-700  { background-color: var(--warning-700); }
.bg-warning-800  { background-color: var(--warning-800); }
.bg-warning-900  { background-color: var(--warning-900); }

.bg-danger      { background-color: var(--danger-500); }
.bg-danger-50   { background-color: var(--danger-50); }
.bg-danger-100  { background-color: var(--danger-100); }
.bg-danger-200  { background-color: var(--danger-200); }
.bg-danger-300  { background-color: var(--danger-300); }
.bg-danger-400  { background-color: var(--danger-400); }
.bg-danger-500  { background-color: var(--danger-500); }
.bg-danger-600  { background-color: var(--danger-600); }
.bg-danger-700  { background-color: var(--danger-700); }
.bg-danger-800  { background-color: var(--danger-800); }
.bg-danger-900  { background-color: var(--danger-900); }

/* Content */
.bg-page   	 { background-color: var(--content-base); }
.bg-content   	 { background-color: var(--content-700); }
.bg-content-accent { background-color: var(--content-accent);  }
.bg-content-50   { background-color: var(--content-50); }
.bg-content-100  { background-color: var(--content-100); }
.bg-content-200  { background-color: var(--content-200); }
.bg-content-300  { background-color: var(--content-300); }
.bg-content-400  { background-color: var(--content-400); }
.bg-content-500  { background-color: var(--content-500); }
.bg-content-600  { background-color: var(--content-600); }
.bg-content-700  { background-color: var(--content-700); }
.bg-content-800  { background-color: var(--content-800); }
.bg-content-900  { background-color: var(--content-900); }

/* ── Background transparency utilities ─────────
   Usage: bg-primary/10  = 10% primary on transparent
   Steps: 5, 10, 20, 30, 40, 50
*/

/* Primary transparent */
.bg-primary\/5   { background-color: color-mix(in srgb, transparent 95%, var(--color-primary)); }
.bg-primary\/10  { background-color: color-mix(in srgb, transparent 90%, var(--color-primary)); }
.bg-primary\/20  { background-color: color-mix(in srgb, transparent 80%, var(--color-primary)); }
.bg-primary\/30  { background-color: color-mix(in srgb, transparent 70%, var(--color-primary)); }
.bg-primary\/40  { background-color: color-mix(in srgb, transparent 60%, var(--color-primary)); }
.bg-primary\/50  { background-color: color-mix(in srgb, transparent 50%, var(--color-primary)); }
.bg-primary\/60  { background-color: color-mix(in srgb, transparent 40%, var(--color-primary)); }
.bg-primary\/70  { background-color: color-mix(in srgb, transparent 30%, var(--color-primary)); }
.bg-primary\/80  { background-color: color-mix(in srgb, transparent 20%, var(--color-primary)); }
.bg-primary\/90  { background-color: color-mix(in srgb, transparent 10%, var(--color-primary)); }
.bg-primary\/100 { background-color: var(--color-primary); }

/* Accent transparent */
.bg-accent\/5    { background-color: color-mix(in srgb, transparent 95%, var(--color-accent)); }
.bg-accent\/10   { background-color: color-mix(in srgb, transparent 90%, var(--color-accent)); }
.bg-accent\/20   { background-color: color-mix(in srgb, transparent 80%, var(--color-accent)); }
.bg-accent\/30   { background-color: color-mix(in srgb, transparent 70%, var(--color-accent)); }
.bg-accent\/40   { background-color: color-mix(in srgb, transparent 60%, var(--color-accent)); }
.bg-accent\/50   { background-color: color-mix(in srgb, transparent 50%, var(--color-accent)); }
.bg-accent\/60   { background-color: color-mix(in srgb, transparent 40%, var(--color-accent)); }
.bg-accent\/70   { background-color: color-mix(in srgb, transparent 30%, var(--color-accent)); }
.bg-accent\/80   { background-color: color-mix(in srgb, transparent 20%, var(--color-accent)); }
.bg-accent\/90   { background-color: color-mix(in srgb, transparent 10%, var(--color-accent)); }
.bg-accent\/100  { background-color: var(--color-accent); }

/* Success transparent */
.bg-success\/5   { background-color: color-mix(in srgb, transparent 95%, var(--color-success)); }
.bg-success\/10  { background-color: color-mix(in srgb, transparent 90%, var(--color-success)); }
.bg-success\/20  { background-color: color-mix(in srgb, transparent 80%, var(--color-success)); }
.bg-success\/30  { background-color: color-mix(in srgb, transparent 70%, var(--color-success)); }
.bg-success\/40  { background-color: color-mix(in srgb, transparent 60%, var(--color-success)); }
.bg-success\/50  { background-color: color-mix(in srgb, transparent 50%, var(--color-success)); }
.bg-success\/60  { background-color: color-mix(in srgb, transparent 40%, var(--color-success)); }
.bg-success\/70  { background-color: color-mix(in srgb, transparent 30%, var(--color-success)); }
.bg-success\/80  { background-color: color-mix(in srgb, transparent 20%, var(--color-success)); }
.bg-success\/90  { background-color: color-mix(in srgb, transparent 10%, var(--color-success)); }
.bg-success\/100 { background-color: var(--color-success); }

/* Warning transparent */
.bg-warning\/5   { background-color: color-mix(in srgb, transparent 95%, var(--color-warning)); }
.bg-warning\/10  { background-color: color-mix(in srgb, transparent 90%, var(--color-warning)); }
.bg-warning\/20  { background-color: color-mix(in srgb, transparent 80%, var(--color-warning)); }
.bg-warning\/30  { background-color: color-mix(in srgb, transparent 70%, var(--color-warning)); }
.bg-warning\/40  { background-color: color-mix(in srgb, transparent 60%, var(--color-warning)); }
.bg-warning\/50  { background-color: color-mix(in srgb, transparent 50%, var(--color-warning)); }
.bg-warning\/60  { background-color: color-mix(in srgb, transparent 40%, var(--color-warning)); }
.bg-warning\/70  { background-color: color-mix(in srgb, transparent 30%, var(--color-warning)); }
.bg-warning\/80  { background-color: color-mix(in srgb, transparent 20%, var(--color-warning)); }
.bg-warning\/90  { background-color: color-mix(in srgb, transparent 10%, var(--color-warning)); }
.bg-warning\/100 { background-color: var(--color-warning); }

/* Danger transparent */
.bg-danger\/5    { background-color: color-mix(in srgb, transparent 95%, var(--color-danger)); }
.bg-danger\/10   { background-color: color-mix(in srgb, transparent 90%, var(--color-danger)); }
.bg-danger\/20   { background-color: color-mix(in srgb, transparent 80%, var(--color-danger)); }
.bg-danger\/30   { background-color: color-mix(in srgb, transparent 70%, var(--color-danger)); }
.bg-danger\/40   { background-color: color-mix(in srgb, transparent 60%, var(--color-danger)); }
.bg-danger\/50   { background-color: color-mix(in srgb, transparent 50%, var(--color-danger)); }
.bg-danger\/60   { background-color: color-mix(in srgb, transparent 40%, var(--color-danger)); }
.bg-danger\/70   { background-color: color-mix(in srgb, transparent 30%, var(--color-danger)); }
.bg-danger\/80   { background-color: color-mix(in srgb, transparent 20%, var(--color-danger)); }
.bg-danger\/90   { background-color: color-mix(in srgb, transparent 10%, var(--color-danger)); }
.bg-danger\/100  { background-color: var(--color-danger); }

/* Content transparent */
.bg-content\/5   { background-color: color-mix(in srgb, transparent 95%, var(--color-core-mixin)); }
.bg-content\/10  { background-color: color-mix(in srgb, transparent 90%, var(--color-core-mixin)); }
.bg-content\/20  { background-color: color-mix(in srgb, transparent 80%, var(--color-core-mixin)); }
.bg-content\/30  { background-color: color-mix(in srgb, transparent 70%, var(--color-core-mixin)); }
.bg-content\/40  { background-color: color-mix(in srgb, transparent 60%, var(--color-core-mixin)); }
.bg-content\/50  { background-color: color-mix(in srgb, transparent 50%, var(--color-core-mixin)); }
.bg-content\/60  { background-color: color-mix(in srgb, transparent 40%, var(--color-core-mixin)); }
.bg-content\/70  { background-color: color-mix(in srgb, transparent 30%, var(--color-core-mixin)); }
.bg-content\/80  { background-color: color-mix(in srgb, transparent 20%, var(--color-core-mixin)); }
.bg-content\/90  { background-color: color-mix(in srgb, transparent 10%, var(--color-core-mixin)); }
.bg-content\/100 { background-color: var(--color-core-mixin); }

/* ── Border color transparent utilities ─────── */

/* Primary transparent */
.border-primary\/5   { border-color: color-mix(in srgb, transparent 95%, var(--color-primary)); }
.border-primary\/10  { border-color: color-mix(in srgb, transparent 90%, var(--color-primary)); }
.border-primary\/20  { border-color: color-mix(in srgb, transparent 80%, var(--color-primary)); }
.border-primary\/30  { border-color: color-mix(in srgb, transparent 70%, var(--color-primary)); }
.border-primary\/40  { border-color: color-mix(in srgb, transparent 60%, var(--color-primary)); }
.border-primary\/50  { border-color: color-mix(in srgb, transparent 50%, var(--color-primary)); }
.border-primary\/60  { border-color: color-mix(in srgb, transparent 40%, var(--color-primary)); }
.border-primary\/70  { border-color: color-mix(in srgb, transparent 30%, var(--color-primary)); }
.border-primary\/80  { border-color: color-mix(in srgb, transparent 20%, var(--color-primary)); }
.border-primary\/90  { border-color: color-mix(in srgb, transparent 10%, var(--color-primary)); }
.border-primary\/100 { border-color: var(--color-primary); }

/* Accent transparent */
.border-accent\/5    { border-color: color-mix(in srgb, transparent 95%, var(--color-accent)); }
.border-accent\/10   { border-color: color-mix(in srgb, transparent 90%, var(--color-accent)); }
.border-accent\/20   { border-color: color-mix(in srgb, transparent 80%, var(--color-accent)); }
.border-accent\/30   { border-color: color-mix(in srgb, transparent 70%, var(--color-accent)); }
.border-accent\/40   { border-color: color-mix(in srgb, transparent 60%, var(--color-accent)); }
.border-accent\/50   { border-color: color-mix(in srgb, transparent 50%, var(--color-accent)); }
.border-accent\/60   { border-color: color-mix(in srgb, transparent 40%, var(--color-accent)); }
.border-accent\/70   { border-color: color-mix(in srgb, transparent 30%, var(--color-accent)); }
.border-accent\/80   { border-color: color-mix(in srgb, transparent 20%, var(--color-accent)); }
.border-accent\/90   { border-color: color-mix(in srgb, transparent 10%, var(--color-accent)); }
.border-accent\/100  { border-color: var(--color-accent); }

/* Success transparent */
.border-success\/5   { border-color: color-mix(in srgb, transparent 95%, var(--color-success)); }
.border-success\/10  { border-color: color-mix(in srgb, transparent 90%, var(--color-success)); }
.border-success\/20  { border-color: color-mix(in srgb, transparent 80%, var(--color-success)); }
.border-success\/30  { border-color: color-mix(in srgb, transparent 70%, var(--color-success)); }
.border-success\/40  { border-color: color-mix(in srgb, transparent 60%, var(--color-success)); }
.border-success\/50  { border-color: color-mix(in srgb, transparent 50%, var(--color-success)); }
.border-success\/60  { border-color: color-mix(in srgb, transparent 40%, var(--color-success)); }
.border-success\/70  { border-color: color-mix(in srgb, transparent 30%, var(--color-success)); }
.border-success\/80  { border-color: color-mix(in srgb, transparent 20%, var(--color-success)); }
.border-success\/90  { border-color: color-mix(in srgb, transparent 10%, var(--color-success)); }
.border-success\/100 { border-color: var(--color-success); }

/* Warning transparent */
.border-warning\/5   { border-color: color-mix(in srgb, transparent 95%, var(--color-warning)); }
.border-warning\/10  { border-color: color-mix(in srgb, transparent 90%, var(--color-warning)); }
.border-warning\/20  { border-color: color-mix(in srgb, transparent 80%, var(--color-warning)); }
.border-warning\/30  { border-color: color-mix(in srgb, transparent 70%, var(--color-warning)); }
.border-warning\/40  { border-color: color-mix(in srgb, transparent 60%, var(--color-warning)); }
.border-warning\/50  { border-color: color-mix(in srgb, transparent 50%, var(--color-warning)); }
.border-warning\/60  { border-color: color-mix(in srgb, transparent 40%, var(--color-warning)); }
.border-warning\/70  { border-color: color-mix(in srgb, transparent 30%, var(--color-warning)); }
.border-warning\/80  { border-color: color-mix(in srgb, transparent 20%, var(--color-warning)); }
.border-warning\/90  { border-color: color-mix(in srgb, transparent 10%, var(--color-warning)); }
.border-warning\/100 { border-color: var(--color-warning); }

/* Danger transparent */
.border-danger\/5    { border-color: color-mix(in srgb, transparent 95%, var(--color-danger)); }
.border-danger\/10   { border-color: color-mix(in srgb, transparent 90%, var(--color-danger)); }
.border-danger\/20   { border-color: color-mix(in srgb, transparent 80%, var(--color-danger)); }
.border-danger\/30   { border-color: color-mix(in srgb, transparent 70%, var(--color-danger)); }
.border-danger\/40   { border-color: color-mix(in srgb, transparent 60%, var(--color-danger)); }
.border-danger\/50   { border-color: color-mix(in srgb, transparent 50%, var(--color-danger)); }
.border-danger\/60   { border-color: color-mix(in srgb, transparent 40%, var(--color-danger)); }
.border-danger\/70   { border-color: color-mix(in srgb, transparent 30%, var(--color-danger)); }
.border-danger\/80   { border-color: color-mix(in srgb, transparent 20%, var(--color-danger)); }
.border-danger\/90   { border-color: color-mix(in srgb, transparent 10%, var(--color-danger)); }
.border-danger\/100  { border-color: var(--color-danger); }

/* Content transparent */
.border-content\/5   { border-color: color-mix(in srgb, transparent 95%, var(--color-core-mixin)); }
.border-content\/10  { border-color: color-mix(in srgb, transparent 90%, var(--color-core-mixin)); }
.border-content\/20  { border-color: color-mix(in srgb, transparent 80%, var(--color-core-mixin)); }
.border-content\/30  { border-color: color-mix(in srgb, transparent 70%, var(--color-core-mixin)); }
.border-content\/40  { border-color: color-mix(in srgb, transparent 60%, var(--color-core-mixin)); }
.border-content\/50  { border-color: color-mix(in srgb, transparent 50%, var(--color-core-mixin)); }
.border-content\/60  { border-color: color-mix(in srgb, transparent 40%, var(--color-core-mixin)); }
.border-content\/70  { border-color: color-mix(in srgb, transparent 30%, var(--color-core-mixin)); }
.border-content\/80  { border-color: color-mix(in srgb, transparent 20%, var(--color-core-mixin)); }
.border-content\/90  { border-color: color-mix(in srgb, transparent 10%, var(--color-core-mixin)); }
.border-content\/100 { border-color: var(--color-core-mixin); }

/* White transparent */
.border-white\/5   { border-color: color-mix(in srgb, transparent 95%, white); }
.border-white\/10  { border-color: color-mix(in srgb, transparent 90%, white); }
.border-white\/20  { border-color: color-mix(in srgb, transparent 80%, white); }
.border-white\/30  { border-color: color-mix(in srgb, transparent 70%, white); }
.border-white\/40  { border-color: color-mix(in srgb, transparent 60%, white); }
.border-white\/50  { border-color: color-mix(in srgb, transparent 50%, white); }
.border-white\/60  { border-color: color-mix(in srgb, transparent 40%, white); }
.border-white\/70  { border-color: color-mix(in srgb, transparent 30%, white); }
.border-white\/80  { border-color: color-mix(in srgb, transparent 20%, white); }
.border-white\/90  { border-color: color-mix(in srgb, transparent 10%, white); }
.border-white\/100 { border-color: white; }

/* ── Text color utilities ───────────────────── */
.text-black        { color: #000; }
.text-black-100        { color: var(--black-100); }
.text-black-200        { color: var(--black-200); }
.text-black-300        { color: var(--black-300); }
.text-black-400        { color: var(--black-400); }
.text-black-500        { color: var(--black-500); }
.text-black-600        { color: var(--black-600); }
.text-black-700        { color: var(--black-700); }
.text-black-800        { color: var(--black-800); }
.text-black-900        { color: var(--black-900); }

.text-white        { color: #fff; }
.text-white-100        { color: var(--white-100); }
.text-white-200        { color: var(--white-200); }
.text-white-300        { color: var(--white-300); }
.text-white-400        { color: var(--white-400); }
.text-white-500        { color: var(--white-500); }
.text-white-600        { color: var(--white-600); }
.text-white-700        { color: var(--white-700); }
.text-white-800        { color: var(--white-800); }
.text-white-900        { color: var(--white-900); }

/* Primary */
.text-primary      { color: var(--primary-500); }
.text-primary-100  { color: var(--primary-100); }
.text-primary-200  { color: var(--primary-200); }
.text-primary-300  { color: var(--primary-300); }
.text-primary-400  { color: var(--primary-400); }
.text-primary-500  { color: var(--primary-500); }
.text-primary-600  { color: var(--primary-600); }
.text-primary-700  { color: var(--primary-700); }
.text-primary-800  { color: var(--primary-800); }
.text-primary-900  { color: var(--primary-900); }

/* Accent */
.text-accent     { color: var(--accent-500); }
.text-accent-100  { color: var(--accent-100); }
.text-accent-200  { color: var(--accent-200); }
.text-accent-300  { color: var(--accent-300); }
.text-accent-400  { color: var(--accent-400); }
.text-accent-500  { color: var(--accent-500); }
.text-accent-600  { color: var(--accent-600); }
.text-accent-700  { color: var(--accent-700); }
.text-accent-800  { color: var(--accent-800); }
.text-accent-900  { color: var(--accent-900); }

/* Content */
.text-muted 	   { color: var(--content-200); }
.text-title 	   { color: var(--title-color); }
.text-content 	  	   { color: var(--content-100); }
.text-content-50  { color: var(--content-50); }
.text-content-100  { color: var(--content-100); }
.text-content-200  { color: var(--content-200); }
.text-content-300  { color: var(--content-300); }
.text-content-400  { color: var(--content-400); }
.text-content-500  { color: var(--content-500); }
.text-content-600  { color: var(--content-600); }
.text-content-700  { color: var(--content-700); }
.text-content-800  { color: var(--content-800); }
.text-content-900  { color: var(--content-900); }

/* Status */
.text-success { color: var(--success-500); }
.text-success-50  { color: var(--success-50); }
.text-success-100  { color: var(--success-100); }
.text-success-200  { color: var(--success-200); }
.text-success-300  { color: var(--success-300); }
.text-success-400  { color: var(--success-400); }
.text-success-500  { color: var(--success-500); }
.text-success-600  { color: var(--success-600); }
.text-success-700  { color: var(--success-700); }
.text-success-800  { color: var(--success-800); }
.text-success-900  { color: var(--success-900); }

.text-warning { color: var(--warning-500); }
.text-warning-50  { color: var(--warning-50); }
.text-warning-100  { color: var(--warning-100); }
.text-warning-200  { color: var(--warning-200); }
.text-warning-300  { color: var(--warning-300); }
.text-warning-400  { color: var(--warning-400); }
.text-warning-500  { color: var(--warning-500); }
.text-warning-600  { color: var(--warning-600); }
.text-warning-700  { color: var(--warning-700); }
.text-warning-800  { color: var(--warning-800); }
.text-warning-900  { color: var(--warning-900); }

.text-danger  { color: var(--danger-500); }
.text-danger-50  { color: var(--danger-50); }
.text-danger-100  { color: var(--danger-100); }
.text-danger-200  { color: var(--danger-200); }
.text-danger-300  { color: var(--danger-300); }
.text-danger-400  { color: var(--danger-400); }
.text-danger-500  { color: var(--danger-500); }
.text-danger-600  { color: var(--danger-600); }
.text-danger-700  { color: var(--danger-700); }
.text-danger-800  { color: var(--danger-800); }
.text-danger-900  { color: var(--danger-900); }

/* ── Text color transparent utilities ──────── */

/* Primary transparent */
.text-primary\/5   { color: color-mix(in srgb, transparent 95%, var(--color-primary)); }
.text-primary\/10  { color: color-mix(in srgb, transparent 90%, var(--color-primary)); }
.text-primary\/20  { color: color-mix(in srgb, transparent 80%, var(--color-primary)); }
.text-primary\/30  { color: color-mix(in srgb, transparent 70%, var(--color-primary)); }
.text-primary\/40  { color: color-mix(in srgb, transparent 60%, var(--color-primary)); }
.text-primary\/50  { color: color-mix(in srgb, transparent 50%, var(--color-primary)); }
.text-primary\/60  { color: color-mix(in srgb, transparent 40%, var(--color-primary)); }
.text-primary\/70  { color: color-mix(in srgb, transparent 30%, var(--color-primary)); }
.text-primary\/80  { color: color-mix(in srgb, transparent 20%, var(--color-primary)); }
.text-primary\/90  { color: color-mix(in srgb, transparent 10%, var(--color-primary)); }
.text-primary\/100 { color: var(--color-primary); }

/* Accent transparent */
.text-accent\/5    { color: color-mix(in srgb, transparent 95%, var(--color-accent)); }
.text-accent\/10   { color: color-mix(in srgb, transparent 90%, var(--color-accent)); }
.text-accent\/20   { color: color-mix(in srgb, transparent 80%, var(--color-accent)); }
.text-accent\/30   { color: color-mix(in srgb, transparent 70%, var(--color-accent)); }
.text-accent\/40   { color: color-mix(in srgb, transparent 60%, var(--color-accent)); }
.text-accent\/50   { color: color-mix(in srgb, transparent 50%, var(--color-accent)); }
.text-accent\/60   { color: color-mix(in srgb, transparent 40%, var(--color-accent)); }
.text-accent\/70   { color: color-mix(in srgb, transparent 30%, var(--color-accent)); }
.text-accent\/80   { color: color-mix(in srgb, transparent 20%, var(--color-accent)); }
.text-accent\/90   { color: color-mix(in srgb, transparent 10%, var(--color-accent)); }
.text-accent\/100  { color: var(--color-accent); }

/* Success transparent */
.text-success\/5   { color: color-mix(in srgb, transparent 95%, var(--color-success)); }
.text-success\/10  { color: color-mix(in srgb, transparent 90%, var(--color-success)); }
.text-success\/20  { color: color-mix(in srgb, transparent 80%, var(--color-success)); }
.text-success\/30  { color: color-mix(in srgb, transparent 70%, var(--color-success)); }
.text-success\/40  { color: color-mix(in srgb, transparent 60%, var(--color-success)); }
.text-success\/50  { color: color-mix(in srgb, transparent 50%, var(--color-success)); }
.text-success\/60  { color: color-mix(in srgb, transparent 40%, var(--color-success)); }
.text-success\/70  { color: color-mix(in srgb, transparent 30%, var(--color-success)); }
.text-success\/80  { color: color-mix(in srgb, transparent 20%, var(--color-success)); }
.text-success\/90  { color: color-mix(in srgb, transparent 10%, var(--color-success)); }
.text-success\/100 { color: var(--color-success); }

/* Warning transparent */
.text-warning\/5   { color: color-mix(in srgb, transparent 95%, var(--color-warning)); }
.text-warning\/10  { color: color-mix(in srgb, transparent 90%, var(--color-warning)); }
.text-warning\/20  { color: color-mix(in srgb, transparent 80%, var(--color-warning)); }
.text-warning\/30  { color: color-mix(in srgb, transparent 70%, var(--color-warning)); }
.text-warning\/40  { color: color-mix(in srgb, transparent 60%, var(--color-warning)); }
.text-warning\/50  { color: color-mix(in srgb, transparent 50%, var(--color-warning)); }
.text-warning\/60  { color: color-mix(in srgb, transparent 40%, var(--color-warning)); }
.text-warning\/70  { color: color-mix(in srgb, transparent 30%, var(--color-warning)); }
.text-warning\/80  { color: color-mix(in srgb, transparent 20%, var(--color-warning)); }
.text-warning\/90  { color: color-mix(in srgb, transparent 10%, var(--color-warning)); }
.text-warning\/100 { color: var(--color-warning); }

/* Danger transparent */
.text-danger\/5    { color: color-mix(in srgb, transparent 95%, var(--color-danger)); }
.text-danger\/10   { color: color-mix(in srgb, transparent 90%, var(--color-danger)); }
.text-danger\/20   { color: color-mix(in srgb, transparent 80%, var(--color-danger)); }
.text-danger\/30   { color: color-mix(in srgb, transparent 70%, var(--color-danger)); }
.text-danger\/40   { color: color-mix(in srgb, transparent 60%, var(--color-danger)); }
.text-danger\/50   { color: color-mix(in srgb, transparent 50%, var(--color-danger)); }
.text-danger\/60   { color: color-mix(in srgb, transparent 40%, var(--color-danger)); }
.text-danger\/70   { color: color-mix(in srgb, transparent 30%, var(--color-danger)); }
.text-danger\/80   { color: color-mix(in srgb, transparent 20%, var(--color-danger)); }
.text-danger\/90   { color: color-mix(in srgb, transparent 10%, var(--color-danger)); }
.text-danger\/100  { color: var(--color-danger); }

/* Content transparent */
.text-content\/5   { color: color-mix(in srgb, transparent 95%, var(--color-core-mixin)); }
.text-content\/10  { color: color-mix(in srgb, transparent 90%, var(--color-core-mixin)); }
.text-content\/20  { color: color-mix(in srgb, transparent 80%, var(--color-core-mixin)); }
.text-content\/30  { color: color-mix(in srgb, transparent 70%, var(--color-core-mixin)); }
.text-content\/40  { color: color-mix(in srgb, transparent 60%, var(--color-core-mixin)); }
.text-content\/50  { color: color-mix(in srgb, transparent 50%, var(--color-core-mixin)); }
.text-content\/60  { color: color-mix(in srgb, transparent 40%, var(--color-core-mixin)); }
.text-content\/70  { color: color-mix(in srgb, transparent 30%, var(--color-core-mixin)); }
.text-content\/80  { color: color-mix(in srgb, transparent 20%, var(--color-core-mixin)); }
.text-content\/90  { color: color-mix(in srgb, transparent 10%, var(--color-core-mixin)); }
.text-content\/100 { color: var(--color-core-mixin); }

/* ── Border color utilities ─────────────────── */
.border-primary     { border-color: var(--primary-500); }
.border-primary-50      { border-color: var(--primary-50); }
.border-primary-100      { border-color: var(--primary-100); }
.border-primary-200      { border-color: var(--primary-200); }
.border-primary-300      { border-color: var(--primary-300); }
.border-primary-400      { border-color: var(--primary-400); }
.border-primary-500      { border-color: var(--primary-500); }
.border-primary-600      { border-color: var(--primary-600); }
.border-primary-700      { border-color: var(--primary-700); }
.border-primary-800      { border-color: var(--primary-800); }
.border-primary-900      { border-color: var(--primary-900); }

.border-accent      { border-color: var(--accent-500); }
.border-accent-50      { border-color: var(--accent-50); }
.border-accent-100      { border-color: var(--accent-100); }
.border-accent-200      { border-color: var(--accent-200); }
.border-accent-300      { border-color: var(--accent-300); }
.border-accent-400      { border-color: var(--accent-400); }
.border-accent-500      { border-color: var(--accent-500); }
.border-accent-600      { border-color: var(--accent-600); }
.border-accent-700      { border-color: var(--accent-700); }
.border-accent-800      { border-color: var(--accent-800); }
.border-accent-900      { border-color: var(--accent-900); }

.border-success     { border-color: var(--success-500); }
.border-success-50      { border-color: var(--success-50); }
.border-success-100      { border-color: var(--success-100); }
.border-success-200      { border-color: var(--success-200); }
.border-success-300      { border-color: var(--success-300); }
.border-success-400      { border-color: var(--success-400); }
.border-success-500      { border-color: var(--success-500); }
.border-success-600      { border-color: var(--success-600); }
.border-success-700      { border-color: var(--success-700); }
.border-success-800      { border-color: var(--success-800); }
.border-success-900      { border-color: var(--success-900); }

.border-warning     { border-color: var(--warning-500); }
.border-warning-50      { border-color: var(--warning-50); }
.border-warning-100      { border-color: var(--warning-100); }
.border-warning-200      { border-color: var(--warning-200); }
.border-warning-300      { border-color: var(--warning-300); }
.border-warning-400      { border-color: var(--warning-400); }
.border-warning-500      { border-color: var(--warning-500); }
.border-warning-600      { border-color: var(--warning-600); }
.border-warning-700      { border-color: var(--warning-700); }
.border-warning-800      { border-color: var(--warning-800); }
.border-warning-900      { border-color: var(--warning-900); }

.border-danger      { border-color: var(--danger-500); }
.border-danger-50      { border-color: var(--danger-50); }
.border-danger-100      { border-color: var(--danger-100); }
.border-danger-200      { border-color: var(--danger-200); }
.border-danger-300      { border-color: var(--danger-300); }
.border-danger-400      { border-color: var(--danger-400); }
.border-danger-500      { border-color: var(--danger-500); }
.border-danger-600      { border-color: var(--danger-600); }
.border-danger-700      { border-color: var(--danger-700); }
.border-danger-800      { border-color: var(--danger-800); }
.border-danger-900      { border-color: var(--danger-900); }

.border-content { border-color: var(--content-600); }
.border-content-50 { border-color: var(--content-50); }
.border-content-100 { border-color: var(--content-100); }
.border-content-200 { border-color: var(--content-200); }
.border-content-300 { border-color: var(--content-300); }
.border-content-400 { border-color: var(--content-400); }
.border-content-500 { border-color: var(--content-500); }
.border-content-600 { border-color: var(--content-600); }
.border-content-700 { border-color: var(--content-700); }
.border-content-800 { border-color: var(--content-800); }
.border-content-900 { border-color: var(--content-900); }

/* ── Ring / focus outlines ──────────────────── */
.ring-primary   { box-shadow: 0 0 0 2px var(--primary-500); }
.ring-accent    { box-shadow: 0 0 0 2px var(--accent-500); }
.ring-danger    { box-shadow: 0 0 0 2px var(--danger-500); }

/* ── Tooltip system ─────────────────────────
   Pure CSS tooltips using data-tooltip attribute.
   Default position: top. Add .tooltip-bottom, .tooltip-left, .tooltip-right.

   Usage:
     <button data-tooltip="Hello world">Hover me</button>
     <span data-tooltip="Below me" class="tooltip-bottom">Info</span>
──────────────────────────────────────────── */

[data-tooltip] {
	position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
	z-index: 100;
}

/* Tooltip bubble */
[data-tooltip]::after {
	content: attr(data-tooltip);
	background: var(--content-900);
	color: var(--content-50);
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	line-height: 1.4;
	padding: 4px 8px;
	border-radius: var(--rounded-md);
	white-space: nowrap;
	border: 1px solid var(--content-600);
}

/* Arrow */
[data-tooltip]::before {
	content: '';
	border: 5px solid transparent;
}

/* Show on hover/focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
	opacity: 1;
}

/* ─ Top (default) ─ */
[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::after {
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
}
[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):hover::after,
[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right):focus::after {
	transform: translateX(-50%) translateY(0);
}
[data-tooltip]:not(.tooltip-bottom):not(.tooltip-left):not(.tooltip-right)::before {
	bottom: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
	border-top-color: var(--content-900);
}

/* ─ Bottom ─ */
[data-tooltip].tooltip-bottom::after {
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
}
[data-tooltip].tooltip-bottom:hover::after,
[data-tooltip].tooltip-bottom:focus::after {
	transform: translateX(-50%) translateY(0);
}
[data-tooltip].tooltip-bottom::before {
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: var(--content-900);
}

/* ─ Left ─ */
[data-tooltip].tooltip-left::after {
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
}
[data-tooltip].tooltip-left:hover::after,
[data-tooltip].tooltip-left:focus::after {
	transform: translateY(-50%) translateX(0);
}
[data-tooltip].tooltip-left::before {
	right: calc(100% - 2px);
	top: 50%;
	transform: translateY(-50%);
	border-left-color: var(--content-900);
}

/* ─ Right ─ */
[data-tooltip].tooltip-right::after {
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
}
[data-tooltip].tooltip-right:hover::after,
[data-tooltip].tooltip-right:focus::after {
	transform: translateY(-50%) translateX(0);
}
[data-tooltip].tooltip-right::before {
	left: calc(100% - 2px);
	top: 50%;
	transform: translateY(-50%);
	border-right-color: var(--content-900);
}

/* ── Slideout ────────────────────────────────
   Reusable slideout panel system.
   Uses Alpine.js for state, CSS for animation.

   Structure:
     <div x-data="{ open: false }" class="slideout" :class="open && 'slideout-open'">
       <div class="slideout-backdrop" @click="open = false"></div>
       <div class="slideout-panel slideout-left">
         ...content...
       </div>
     </div>

   Directions: slideout-left, slideout-right
   Trigger: toggle `open` from anywhere via Alpine
──────────────────────────────────────────── */

.slideout {
	position: fixed;
	inset: 0;
	z-index: 1000;
	pointer-events: none;
}
.slideout-open {
	pointer-events: auto;
}

/* Backdrop */
.slideout-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	transition: opacity var(--duration-default) ease;
	pointer-events: none;
}
.slideout-open .slideout-backdrop {
	opacity: 1;
	pointer-events: auto;
}

/* Panel base */
.slideout-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: var(--content-base);
	overflow-y: auto;
	scrollbar-width: thin;
	transition: transform var(--duration-default) ease;
	pointer-events: auto;
}

/* Left */
.slideout-left {
	left: 0;
	border-right: 1px solid var(--content-600);
	transform: translateX(-100%);
}
.slideout-open .slideout-left {
	transform: translateX(0);
}

/* Right */
.slideout-right {
	right: 0;
	border-left: 1px solid var(--content-600);
	transform: translateX(100%);
}
.slideout-open .slideout-right {
	transform: translateX(0);
}

/* Center (modal) */
.slideout-center {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: min(500px, 90vw);
	max-height: 85vh;
	border: 1px solid var(--content-600);
	border-radius: var(--rounded-xl);
	transform: translate(-50%, -50%) scale(0.95);
	opacity: 0;
}
.slideout-open .slideout-center {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* ── Button overrides ───────────────────── */
.btn-primary,
.btn-secondary,
.btn-tertiary {
	border-radius: var(--rounded-lg);
	font-size: var(--text-sm);
}

.btn-primary {
	--btn-color-bg: var(--primary-500);
	--btn-color-bg-hover: var(--primary-600);
	--btn-color-text: #fff;
	--btn-color-text-hover: #fff;
}

.btn-secondary {
	--btn-color-bg: var(--content-600);
	--btn-color-bg-hover: var(--content-500);
	--btn-color-text: var(--content-100);
	--btn-color-text-hover: var(--content-50);
}

.quantity-field {
	border-radius: var(--rounded-lg);
	overflow: hidden;
	border-color: var(--content-600);
}

.store-product:not(.store-product-full) .quantity-field .qty-text {
    display: block !important;
}

.quantity-field .adjust {
	border-radius: 0;
    background: transparent !important;
}

.product-item .quantity-field {
    width: 100%;
}

.store-product:not(.store-product-full) .quantity-field {
    background: var(--content-800) !important;
    width: 100%;
}

/* ── Package detail overrides ──────────── */
.store-product-full {
	display: block;
	padding: 0;
}

.store-product-full .actions {
	position: static !important;
	margin: 0;
	padding: 0;
	background: none;
	backdrop-filter: none;
}

.store-product-full .product-title {
	font-size: inherit;
}

.store-product-full .price {
	margin-right: 0;
}
.quantity-btn--active {
    border-color: color-mix(in srgb, transparent 65%, var(--color-primary));
    background-color: color-mix(in srgb, transparent 90%, var(--color-primary));
}

.app-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: 25vh;
    overflow: hidden;
}

.app-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--background-opacity);
}

.app-bg:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--color-bg), transparent);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* ── App overlay (FOUC prevention) ────── */
#app-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--color-bg);
	opacity: 1;
	transition: opacity var(--page-transition-duration) ease;
	pointer-events: none;
}
#app-overlay.loaded {
	opacity: 0;
}

/* ── Loader utilities ─────────────────── */
.loader {
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #FFF;
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 



@keyframes skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.cms-stack { display: grid; grid-template: 1fr / 1fr; }
.cms-layer { grid-area: 1 / 1; }
.skel-pulse {
    background: var(--content-500, rgba(255,255,255,.06));
    animation: skel-pulse 1.5s ease-in-out infinite;
}
.dropdown-panel {
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}
.quantity-field.hidden {
    display: none;
}

/* ── Watermark utilities ─────────────────── */
#benj {
    width: 54px;
    display: block;
}
#benj .wm-shadow {
    fill: #000000;
}
#benj .wm-text {
    fill: #fefefe;
}
#benj .wm-accent {
    fill: var(--color-primary);
}
.color-pallete {
    max-height: 450px;
    overflow-y: scroll;
}


/* ── Basket utilities ─────────────────── */
.popup.basket-popup {
    overflow: hidden;
 	padding: 0;
}
.basket-popup .popup-scroll-cont {
  justify-content: flex-end;
  padding: 0;
}

.basket-popup-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: var(--color-bg);
  transition: translate var(--fade-duration) ease-in-out;
}
@starting-style {
  .basket-popup-content {
    translate: 100% 0;
  }
}
:root .basket-popup[hidden] .basket-popup-content {
  translate: 100% 0;
}
.basket-popup-content.updating {
  pointer-events: none;
}
.basket-popup-content.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 38px;
  height: 38px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.basket-popup-content.updating > * {
  filter: grayscale(100%);
}

.actions {
  position: relative;
}

/* ── Backdrop blur utilities ────────────────── */
.backdrop-blur-none { backdrop-filter: blur(0); }
.backdrop-blur-sm   { backdrop-filter: blur(4px); }
.backdrop-blur      { backdrop-filter: blur(8px); }
.backdrop-blur-md   { backdrop-filter: blur(12px); }
.backdrop-blur-lg   { backdrop-filter: blur(16px); }
.backdrop-blur-xl   { backdrop-filter: blur(24px); }
.backdrop-blur-2xl  { backdrop-filter: blur(40px); }
.backdrop-blur-3xl  { backdrop-filter: blur(64px); }

/* ── Utility Animations ── */
@keyframes glow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@keyframes glowSubtle {
  0%, 100% { opacity: .1; }
  50% { opacity: .4; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-glow-subtle  { --animate-duration: 3s; animation: glowSubtle  var(--animate-duration) ease-in-out infinite; }
.animate-glow  { --animate-duration: 3s; animation: glow  var(--animate-duration) ease-in-out infinite; }
.animate-pulse { --animate-duration: 2s; animation: pulse var(--animate-duration) ease-in-out infinite; }
.animate-float { --animate-duration: 3s; animation: float var(--animate-duration) ease-in-out infinite; }

/* Speed overrides — add alongside any animate-* class */
.animate-slow    { --animate-duration: 5s; }
.animate-fast    { --animate-duration: 1s; }
.animate-faster  { --animate-duration: 0.5s; }