/* 
 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:   #181921;
	--color-core-mixin: #424457;
    --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:1000px;
    
	/* ── 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), 24px);
	--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: "Montserrat", sans-serif !important;
	--font-body:    inherit;

	/* 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 */

	/* 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-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);

	/* 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:    #8b5cf6;
	--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));
	--content-700: color-mix(in srgb, var(--color-core-mixin) 10%, var(--color-core));
	--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-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));

	/* Override shared.css variables so Tebex loaders, buttons, text adapt */
	--color-text: #111827;
	--color-text-darker: #1f2937;
	--color-text-secondary: #4b5563;
	--color-brighter-bg: #e5e7eb;
}

/*═══════════════════════════════
	BASE
═══════════════════════════════*/

[x-cloak] { display: none !important; }

body { font-family: var(--font-body); }
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; }

.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); }

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

/* Width — fractional & keyword */
.w-full   { width: 100%; }
.w-screen { width: 100vw; }
.w-auto   { width: auto; }
.w-fit    { width: fit-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 — keyword */
.h-full   { height: 100%; }
.h-screen { height: 100vh; }
.h-auto   { height: auto; }
.h-fit    { height: fit-content; }

/* 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%; }
.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-96   { max-width: 24rem; }
.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-full { max-width: 100%; }
.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; }
.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; }

/* 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-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-wrap: wrap; }

/* Flex parent modifiers (chain with .flex) */
.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); }

/* 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); }

/* 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); }
.-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); }

/*═══════════════════════════════
	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 { 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); }

/* 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-full { border-radius: var(--rounded-full); }

.rounded-t-none { border-top-left-radius: 0;                   border-top-right-radius: 0; }
.rounded-b-none { border-bottom-left-radius: 0;                border-bottom-right-radius: 0; }
.rounded-t-lg   { border-top-left-radius: var(--rounded-lg);    border-top-right-radius: var(--rounded-lg); }
.rounded-t-lg   { border-top-left-radius: var(--rounded-xl);    border-top-right-radius: var(--rounded-xl); }
.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); }

/*═══════════════════════════════
	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); }

/*═══════════════════════════════
	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-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-y-0     { transform: translateY(0); }
.translate-y-full  { transform: translateY(100%); }
.-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-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-full { max-width: 100%; }

	/* 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-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%; }
}

/* ── 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; flex-wrap: wrap; }
	.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%; }

	/* 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); }

	/* 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-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-full { max-width: 100%; }

	/* 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-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; }
}

/* ── 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; flex-wrap: wrap; }
	.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%; }

	/* 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); }

	/* 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-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-full { max-width: 100%; }

	/* 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-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; }
}

/* ── 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-base   	 { background-color: var(--content-700); }
.bg-page   	 { background-color: var(--color-core); }
.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-base 	  	   { color: var(--content-100); }
.text-muted 	   { color: var(--content-200); }
.text-title 	   { color: var(--title-color); }
.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-base { 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);
}

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

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

/* ── 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: .25;
}

.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;
}


/* ── Basket utilities ─────────────────── */
.basket-popup-content {
    border-radius: 0px !important;
    max-width: 480px;
}
.basket-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
.basket-popup {
    overflow: hidden !important;
}

/* ── 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;
}