/* ============================================================ 🎨 COMPLETE TOKENS LIST ============================================================ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIZE TOKENS (Multi-purpose) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ tiny, small, base, medium, large, xlarge, x2large, x3large, x4large, x5large, x6large ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PADDING TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ pad-tiny, pad-small, pad-base, pad-medium, pad-large, pad-xlarge, pad-x2large, pad-x3large, pad-x4large, pad-x5large padx-tiny, padx-small, padx-base, padx-medium, padx-large, padx-xlarge, padx-x2large, padx-x3large, padx-x4large, padx-x5large pady-tiny, pady-small, pady-base, pady-medium, pady-large, pady-xlarge, pady-x2large, pady-x3large, pady-x4large, pady-x5large padt-tiny, padt-small, padt-base, padt-medium, padt-large, padt-xlarge, padt-x2large, padt-x3large, padt-x4large, padt-x5large padb-tiny, padb-small, padb-base, padb-medium, padb-large, padb-xlarge, padb-x2large, padb-x3large, padb-x4large, padb-x5large padl-tiny, padl-small, padl-base, padl-medium, padl-large, padl-xlarge, padl-x2large, padl-x3large, padl-x4large, padl-x5large padr-tiny, padr-small, padr-base, padr-medium, padr-large, padr-xlarge, padr-x2large, padr-x3large, padr-x4large, padr-x5large pads-tiny, pads-small, pads-base, pads-medium, pads-large, pads-xlarge pade-tiny, pade-small, pade-base, pade-medium, pade-large, pade-xlarge ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MARGIN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ m-tiny, m-small, m-base, m-medium, m-large, m-xlarge, m-x2large, m-x3large, m-x4large, m-x5large mx-tiny, mx-small, mx-base, mx-medium, mx-large, mx-xlarge, mx-x2large, mx-x3large, mx-x4large, mx-x5large my-tiny, my-small, my-base, my-medium, my-large, my-xlarge, my-x2large, my-x3large, my-x4large, my-x5large mt-tiny, mt-small, mt-base, mt-medium, mt-large, mt-xlarge, mt-x2large, mt-x3large, mt-x4large, mt-x5large mb-tiny, mb-small, mb-base, mb-medium, mb-large, mb-xlarge, mb-x2large, mb-x3large, mb-x4large, mb-x5large ml-tiny, ml-small, ml-base, ml-medium, ml-large, ml-xlarge, ml-x2large, ml-x3large, ml-x4large, ml-x5large mr-tiny, mr-small, mr-base, mr-medium, mr-large, mr-xlarge, mr-x2large, mr-x3large, mr-x4large, mr-x5large ms-tiny, ms-small, ms-base, ms-medium, ms-large, ms-xlarge me-tiny, me-small, me-base, me-medium, me-large, me-xlarge m-auto, mx-auto, my-auto, mt-auto, mb-auto, ml-auto, mr-auto ms-auto, me-auto ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GAP TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ gap-tiny, gap-small, gap-base, gap-medium, gap-large, gap-xlarge, gap-x2large, gap-x3large, gap-x4large, gap-x5large gapx-tiny, gapx-small, gapx-base, gapx-medium, gapx-large, gapx-xlarge, gapx-x2large, gapx-x3large, gapx-x4large, gapx-x5large gapy-tiny, gapy-small, gapy-base, gapy-medium, gapy-large, gapy-xlarge, gapy-x2large, gapy-x3large, gapy-x4large, gapy-x5large ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FONT SIZE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ text-tiny, text-small, text-base, text-medium, text-large, text-xlarge, text-x2large, text-x3large, text-x4large, text-x5large text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xl, text-6xl, text-7xl, text-8xl, text-9xl, text-10xl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FONT WEIGHT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FONT FAMILY TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ font-sans, font-serif, font-mono, font-display, font-body, font-heading ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEXT ALIGNMENT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ text-left, text-center, text-right, text-justify, text-start, text-end ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEXT DECORATION TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ underline, overline, line-through, no-underline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEXT TRANSFORM TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ uppercase, lowercase, capitalize, normal-case ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LETTER SPACING TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LINE HEIGHT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BORDER RADIUS TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ radius-none, radius-sm, radius-base, radius-md, radius-lg, radius-xl, radius-2xl, radius-3xl, radius-4xl, radius-full, radius-circle radius-start-sm, radius-start-base, radius-start-lg radius-end-sm, radius-end-base, radius-end-lg ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SHADOW TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ shadow-none, shadow-xs, shadow-sm, shadow-base, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-3xl shadow-card, shadow-card-hover, shadow-btn, shadow-btn-hover, shadow-btn-active, shadow-dropdown, shadow-modal, shadow-popover, shadow-tooltip ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DISPLAY TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ flex, inline-flex, block, inline-block, grid, inline-grid, hidden, contents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FLEXBOX TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ flex-row, flex-column, flex-row-reverse, flex-column-reverse items-start, items-center, items-end, items-stretch, items-baseline justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly flex-wrap, flex-nowrap, flex-wrap-reverse flex-1, flex-auto, flex-none, flex-initial flex-grow, flex-grow-0, flex-shrink, flex-shrink-0 self-auto, self-start, self-center, self-end, self-stretch, self-baseline ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GRID TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ grid-cols-1 through grid-cols-12, grid-cols-none col-span-1 through col-span-12, col-span-full grid-rows-1 through grid-rows-6, grid-rows-none row-span-1 through row-span-6, row-span-full grid-flow-row, grid-flow-col, grid-flow-dense, grid-flow-row-dense, grid-flow-col-dense place-items-start, place-items-center, place-items-end, place-items-stretch place-content-start, place-content-center, place-content-end, place-content-between, place-content-around, place-content-evenly, place-content-stretch place-self-auto, place-self-start, place-self-center, place-self-end, place-self-stretch ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WIDTH TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ w-0, w-px, w-0.5, w-1, w-1.5, w-2, w-2.5, w-3, w-3.5, w-4, w-5, w-6, w-7, w-8, w-9, w-10, w-11, w-12, w-14, w-16, w-20, w-24, w-28, w-32, w-36, w-40, w-44, w-48, w-52, w-56, w-60, w-64, w-72, w-80, w-96 w-auto, w-full, w-screen, w-min, w-max, w-fit w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, w-1/5, w-2/5, w-3/5, w-4/5, w-1/6, w-5/6 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HEIGHT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ h-0, h-px, h-0.5, h-1, h-1.5, h-2, h-2.5, h-3, h-3.5, h-4, h-5, h-6, h-7, h-8, h-9, h-10, h-11, h-12, h-14, h-16, h-20, h-24, h-28, h-32, h-36, h-40, h-44, h-48, h-52, h-56, h-60, h-64, h-72, h-80, h-96 h-auto, h-full, h-screen, h-min, h-max, h-fit h-1/2, h-1/3, h-2/3, h-1/4, h-3/4, h-1/5, h-2/5, h-3/5, h-4/5, h-1/6, h-5/6 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MIN-WIDTH TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ min-w-0, min-w-full, min-w-screen, min-w-min, min-w-max, min-w-fit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MIN-HEIGHT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ min-h-0, min-h-full, min-h-screen, min-h-min, min-h-max, min-h-fit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAX-WIDTH TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ max-w-0, max-w-none, max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-3xl, max-w-4xl, max-w-5xl, max-w-6xl, max-w-7xl, max-w-full, max-w-screen, max-w-min, max-w-max, max-w-fit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAX-HEIGHT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ max-h-0, max-h-none, max-h-full, max-h-screen, max-h-min, max-h-max, max-h-fit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ POSITION TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ relative, absolute, fixed, sticky, static top-0, top-auto, right-0, right-auto, bottom-0, bottom-auto, left-0, left-auto inset-0, inset-auto, inset-x-0, inset-y-0 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Z-INDEX TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ z-0, z-10, z-20, z-30, z-40, z-50, z-auto z-dropdown, z-sticky, z-fixed, z-modal-backdrop, z-modal, z-popover, z-tooltip, z-toast ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OVERFLOW TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ overflow-auto, overflow-hidden, overflow-visible, overflow-scroll, overflow-clip overflow-x-auto, overflow-x-hidden, overflow-x-visible, overflow-x-scroll overflow-y-auto, overflow-y-hidden, overflow-y-visible, overflow-y-scroll ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OPACITY TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ opacity-0, opacity-5, opacity-10, opacity-20, opacity-25, opacity-30, opacity-40, opacity-50, opacity-60, opacity-70, opacity-75, opacity-80, opacity-90, opacity-100 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TRANSITION TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ transition-none, transition-fast, transition-base, transition-slow, transition-slower, transition-slide, transition-bounce transition-colors, transition-opacity, transition-shadow, transition-transform, transition-all ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BACKGROUND TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ bg-body, bg-body-secondary, bg-card, bg-card-hover, bg-card-active, bg-soft, bg-soft-hover, bg-input, bg-input-hover, bg-input-focus, bg-muted, bg-muted-hover, bg-overlay, bg-overlay-light, bg-overlay-dark, bg-transparent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TEXT COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ text-body, text-body-secondary, text-muted, text-muted-light, text-inverse, text-inverse-light, text-disabled, text-placeholder, text-link, text-link-hover ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BORDER TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ border, border-0, border-2, border-4, border-8 border-t, border-r, border-b, border-l border-x, border-y border-color, border-color-light, border-color-dark, border-color-focus, border-color-error, border-color-success, border-color-warning border-solid, border-dashed, border-dotted, border-double, border-none ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OUTLINE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ outline-none, outline, outline-2, outline-4, outline-offset-2, outline-offset-4 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VISIBILITY TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ visible, invisible ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CURSOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ cursor-pointer, cursor-default, cursor-wait, cursor-text, cursor-move, cursor-not-allowed, cursor-grab, cursor-grabbing, cursor-zoom-in, cursor-zoom-out ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ POINTER EVENTS TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ pointer-events-none, pointer-events-auto ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ USER SELECT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ select-none, select-text, select-all, select-auto ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHITE-SPACE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line, whitespace-pre-wrap ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WORD BREAK TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ break-normal, break-words, break-all, break-keep ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIST STYLE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ list-none, list-disc, list-decimal, list-square ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VERTICAL ALIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom, align-sub, align-super ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TABLE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ table, table-auto, table-fixed, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, table-row ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OBJECT FIT TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ object-contain, object-cover, object-fill, object-none, object-scale-down object-top, object-bottom, object-left, object-right, object-center ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TRANSFORM TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150 rotate-0, rotate-45, rotate-90, rotate-180, rotate-270, rotate-360 translate-x-0, translate-x-px, translate-x-0.5, translate-x-1, translate-x-1.5, translate-x-2, translate-x-3, translate-x-4, translate-x-5, translate-x-6, translate-x-8, translate-x-10, translate-x-12, translate-x-16, translate-x-20, translate-x-24, translate-x-32, translate-x-40, translate-x-48, translate-x-56, translate-x-64, translate-x-72, translate-x-80, translate-x-96 -translate-x-px, -translate-x-0.5, -translate-x-1, -translate-x-1.5, -translate-x-2, -translate-x-3, -translate-x-4, -translate-x-5, -translate-x-6, -translate-x-8, -translate-x-10, -translate-x-12 translate-y-0, translate-y-px, translate-y-0.5, translate-y-1, translate-y-1.5, translate-y-2, translate-y-3, translate-y-4, translate-y-5, translate-y-6, translate-y-8, translate-y-10, translate-y-12, translate-y-16, translate-y-20, translate-y-24, translate-y-32, translate-y-40, translate-y-48, translate-y-56, translate-y-64, translate-y-72, translate-y-80, translate-y-96 -translate-y-px, -translate-y-0.5, -translate-y-1, -translate-y-1.5, -translate-y-2, -translate-y-3, -translate-y-4, -translate-y-5, -translate-y-6, -translate-y-8, -translate-y-10, -translate-y-12 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ASPECT RATIO TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ aspect-auto, aspect-square, aspect-video, aspect-1/1, aspect-4/3, aspect-3/4, aspect-16/9, aspect-9/16, aspect-21/9 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ANIMATION TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ animate-none, animate-spin, animate-ping, animate-pulse, animate-bounce ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BACKDROP BLUR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ backdrop-blur-none, backdrop-blur-sm, backdrop-blur-base, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MIX BLEND MODE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten, mix-blend-color-dodge, mix-blend-color-burn, mix-blend-hard-light, mix-blend-soft-light, mix-blend-difference, mix-blend-exclusion, mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL MARGIN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ scroll-m-0, scroll-m-2, scroll-m-4, scroll-m-8 scroll-mt-0, scroll-mt-2, scroll-mt-4, scroll-mt-8 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SCROLL PADDING TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ scroll-p-0, scroll-p-2, scroll-p-4, scroll-p-8 scroll-pt-0, scroll-pt-2, scroll-pt-4, scroll-pt-8 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SNAP TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ snap-none, snap-x, snap-y, snap-both, snap-mandatory, snap-proximity, snap-start, snap-center, snap-end, snap-align-none, snap-stop-normal, snap-stop-always ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SOLID COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ solid-primary, solid-secondary, solid-success, solid-danger, solid-warn, solid-accent, solid-info, solid-muted ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SOFT COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ soft-primary, soft-secondary, soft-success, soft-danger, soft-warn, soft-accent, soft-info, soft-muted ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ OUTLINE COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ outline-primary, outline-secondary, outline-success, outline-danger, outline-warn, outline-accent, outline-info, outline-muted ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GHOST COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ghost-primary, ghost-secondary, ghost-success, ghost-danger, ghost-warn, ghost-accent, ghost-info, ghost-muted ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GLASS COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ glass-primary, glass-secondary, glass-success, glass-danger, glass-warn, glass-accent, glass-info, glass-muted ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GRADIENT COLOR TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ gradient-primary, gradient-secondary, gradient-success, gradient-danger, gradient-warn, gradient-accent, gradient-info ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ INTERACTIVE TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ hover, hover-scale, hover-lift, hover-glow, pulse, glow, bounce, ripple, shake, blink, live, spin, ping ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ============================================================ */ /* ============================================================ SIZE TOKENS (Multi-purpose) ============================================================ */ .tiny { font-size: var(--font-xs); padding: var(--spacing-1) var(--spacing-2); gap: var(--spacing-2); --avatar-size: var(--spacing-6); min-width: var(--spacing-6); } .small { font-size: var(--font-xs); padding: var(--spacing-2) var(--spacing-3); gap: var(--spacing-2); --avatar-size: var(--spacing-8); min-width: var(--spacing-8); } .base { font-size: var(--font-sm); padding: var(--spacing-2) var(--spacing-4); gap: var(--spacing-3); --avatar-size: var(--spacing-11); min-width: var(--spacing-10); } .medium { font-size: var(--font-base); padding: var(--spacing-3) var(--spacing-5); gap: var(--spacing-3); --avatar-size: var(--spacing-14); min-width: var(--spacing-12); } .large { font-size: var(--font-lg); padding: var(--spacing-4) var(--spacing-6); gap: var(--spacing-4); --avatar-size: var(--spacing-18); min-width: var(--spacing-14); } .xlarge { font-size: var(--font-xl); padding: var(--spacing-5) var(--spacing-8); gap: var(--spacing-4); --avatar-size: var(--spacing-24); min-width: var(--spacing-16); } .x2large { font-size: var(--font-2xl); padding: var(--spacing-6) var(--spacing-10); gap: var(--spacing-5); --avatar-size: var(--spacing-32); min-width: var(--spacing-20); } .x3large { font-size: var(--font-3xl); padding: var(--spacing-8) var(--spacing-12); gap: var(--spacing-5); --avatar-size: var(--spacing-40); min-width: var(--spacing-24); } .x4large { font-size: var(--font-4xl); padding: var(--spacing-10) var(--spacing-14); gap: var(--spacing-6); --avatar-size: var(--spacing-48); min-width: var(--spacing-28); } .x5large { font-size: var(--font-5xl); padding: var(--spacing-12) var(--spacing-16); gap: var(--spacing-6); --avatar-size: var(--spacing-56); min-width: var(--spacing-32); } .x6large { font-size: var(--font-6xl); padding: var(--spacing-14) var(--spacing-20); gap: var(--spacing-6); --avatar-size: var(--spacing-64); min-width: var(--spacing-36); } /* ============================================================ PADDING TOKENS ============================================================ */ .pad-tiny { padding: var(--spacing-2); } .pad-small { padding: var(--spacing-3); } .pad-base { padding: var(--spacing-4); } .pad-medium { padding: var(--spacing-5); } .pad-large { padding: var(--spacing-6); } .pad-xlarge { padding: var(--spacing-8); } .pad-x2large { padding: var(--spacing-10); } .pad-x3large { padding: var(--spacing-12); } .pad-x4large { padding: var(--spacing-14); } .pad-x5large { padding: var(--spacing-16); } .padx-tiny { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } .padx-small { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } .padx-base { padding-left: var(--spacing-4); padding-right: var(--spacing-4); } .padx-medium { padding-left: var(--spacing-5); padding-right: var(--spacing-5); } .padx-large { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } .padx-xlarge { padding-left: var(--spacing-8); padding-right: var(--spacing-8); } .padx-x2large { padding-left: var(--spacing-10); padding-right: var(--spacing-10); } .padx-x3large { padding-left: var(--spacing-12); padding-right: var(--spacing-12); } .padx-x4large { padding-left: var(--spacing-14); padding-right: var(--spacing-14); } .padx-x5large { padding-left: var(--spacing-16); padding-right: var(--spacing-16); } .pady-tiny { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); } .pady-small { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); } .pady-base { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); } .pady-medium { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); } .pady-large { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); } .pady-xlarge { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); } .pady-x2large { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); } .pady-x3large { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); } .pady-x4large { padding-top: var(--spacing-14); padding-bottom: var(--spacing-14); } .pady-x5large { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); } .padt-tiny { padding-top: var(--spacing-2); } .padt-small { padding-top: var(--spacing-3); } .padt-base { padding-top: var(--spacing-4); } .padt-medium { padding-top: var(--spacing-5); } .padt-large { padding-top: var(--spacing-6); } .padt-xlarge { padding-top: var(--spacing-8); } .padt-x2large { padding-top: var(--spacing-10); } .padt-x3large { padding-top: var(--spacing-12); } .padt-x4large { padding-top: var(--spacing-14); } .padt-x5large { padding-top: var(--spacing-16); } .padb-tiny { padding-bottom: var(--spacing-2); } .padb-small { padding-bottom: var(--spacing-3); } .padb-base { padding-bottom: var(--spacing-4); } .padb-medium { padding-bottom: var(--spacing-5); } .padb-large { padding-bottom: var(--spacing-6); } .padb-xlarge { padding-bottom: var(--spacing-8); } .padb-x2large { padding-bottom: var(--spacing-10); } .padb-x3large { padding-bottom: var(--spacing-12); } .padb-x4large { padding-bottom: var(--spacing-14); } .padb-x5large { padding-bottom: var(--spacing-16); } .padl-tiny { padding-left: var(--spacing-2); } .padl-small { padding-left: var(--spacing-3); } .padl-base { padding-left: var(--spacing-4); } .padl-medium { padding-left: var(--spacing-5); } .padl-large { padding-left: var(--spacing-6); } .padl-xlarge { padding-left: var(--spacing-8); } .padl-x2large { padding-left: var(--spacing-10); } .padl-x3large { padding-left: var(--spacing-12); } .padl-x4large { padding-left: var(--spacing-14); } .padl-x5large { padding-left: var(--spacing-16); } .padr-tiny { padding-right: var(--spacing-2); } .padr-small { padding-right: var(--spacing-3); } .padr-base { padding-right: var(--spacing-4); } .padr-medium { padding-right: var(--spacing-5); } .padr-large { padding-right: var(--spacing-6); } .padr-xlarge { padding-right: var(--spacing-8); } .padr-x2large { padding-right: var(--spacing-10); } .padr-x3large { padding-right: var(--spacing-12); } .padr-x4large { padding-right: var(--spacing-14); } .padr-x5large { padding-right: var(--spacing-16); } .pads-tiny { padding-inline-start: var(--spacing-2); } .pads-small { padding-inline-start: var(--spacing-3); } .pads-base { padding-inline-start: var(--spacing-4); } .pads-medium { padding-inline-start: var(--spacing-5); } .pads-large { padding-inline-start: var(--spacing-6); } .pads-xlarge { padding-inline-start: var(--spacing-8); } .pade-tiny { padding-inline-end: var(--spacing-2); } .pade-small { padding-inline-end: var(--spacing-3); } .pade-base { padding-inline-end: var(--spacing-4); } .pade-medium { padding-inline-end: var(--spacing-5); } .pade-large { padding-inline-end: var(--spacing-6); } .pade-xlarge { padding-inline-end: var(--spacing-8); } /* ============================================================ MARGIN TOKENS ============================================================ */ .m-tiny { margin: var(--spacing-2); } .m-small { margin: var(--spacing-3); } .m-base { margin: var(--spacing-4); } .m-medium { margin: var(--spacing-5); } .m-large { margin: var(--spacing-6); } .m-xlarge { margin: var(--spacing-8); } .m-x2large { margin: var(--spacing-10); } .m-x3large { margin: var(--spacing-12); } .m-x4large { margin: var(--spacing-14); } .m-x5large { margin: var(--spacing-16); } .mx-tiny { margin-left: var(--spacing-2); margin-right: var(--spacing-2); } .mx-small { margin-left: var(--spacing-3); margin-right: var(--spacing-3); } .mx-base { margin-left: var(--spacing-4); margin-right: var(--spacing-4); } .mx-medium { margin-left: var(--spacing-5); margin-right: var(--spacing-5); } .mx-large { margin-left: var(--spacing-6); margin-right: var(--spacing-6); } .mx-xlarge { margin-left: var(--spacing-8); margin-right: var(--spacing-8); } .mx-x2large { margin-left: var(--spacing-10); margin-right: var(--spacing-10); } .mx-x3large { margin-left: var(--spacing-12); margin-right: var(--spacing-12); } .mx-x4large { margin-left: var(--spacing-14); margin-right: var(--spacing-14); } .mx-x5large { margin-left: var(--spacing-16); margin-right: var(--spacing-16); } .my-tiny { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); } .my-small { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); } .my-base { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } .my-medium { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); } .my-large { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); } .my-xlarge { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); } .my-x2large { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); } .my-x3large { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); } .my-x4large { margin-top: var(--spacing-14); margin-bottom: var(--spacing-14); } .my-x5large { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); } .mt-tiny { margin-top: var(--spacing-2); } .mt-small { margin-top: var(--spacing-3); } .mt-base { margin-top: var(--spacing-4); } .mt-medium { margin-top: var(--spacing-5); } .mt-large { margin-top: var(--spacing-6); } .mt-xlarge { margin-top: var(--spacing-8); } .mt-x2large { margin-top: var(--spacing-10); } .mt-x3large { margin-top: var(--spacing-12); } .mt-x4large { margin-top: var(--spacing-14); } .mt-x5large { margin-top: var(--spacing-16); } .mb-tiny { margin-bottom: var(--spacing-2); } .mb-small { margin-bottom: var(--spacing-3); } .mb-base { margin-bottom: var(--spacing-4); } .mb-medium { margin-bottom: var(--spacing-5); } .mb-large { margin-bottom: var(--spacing-6); } .mb-xlarge { margin-bottom: var(--spacing-8); } .mb-x2large { margin-bottom: var(--spacing-10); } .mb-x3large { margin-bottom: var(--spacing-12); } .mb-x4large { margin-bottom: var(--spacing-14); } .mb-x5large { margin-bottom: var(--spacing-16); } .ml-tiny { margin-left: var(--spacing-2); } .ml-small { margin-left: var(--spacing-3); } .ml-base { margin-left: var(--spacing-4); } .ml-medium { margin-left: var(--spacing-5); } .ml-large { margin-left: var(--spacing-6); } .ml-xlarge { margin-left: var(--spacing-8); } .ml-x2large { margin-left: var(--spacing-10); } .ml-x3large { margin-left: var(--spacing-12); } .ml-x4large { margin-left: var(--spacing-14); } .ml-x5large { margin-left: var(--spacing-16); } .mr-tiny { margin-right: var(--spacing-2); } .mr-small { margin-right: var(--spacing-3); } .mr-base { margin-right: var(--spacing-4); } .mr-medium { margin-right: var(--spacing-5); } .mr-large { margin-right: var(--spacing-6); } .mr-xlarge { margin-right: var(--spacing-8); } .mr-x2large { margin-right: var(--spacing-10); } .mr-x3large { margin-right: var(--spacing-12); } .mr-x4large { margin-right: var(--spacing-14); } .mr-x5large { margin-right: var(--spacing-16); } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } .mt-auto { margin-top: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .ms-tiny { margin-inline-start: var(--spacing-2); } .ms-small { margin-inline-start: var(--spacing-3); } .ms-base { margin-inline-start: var(--spacing-4); } .ms-medium { margin-inline-start: var(--spacing-5); } .ms-large { margin-inline-start: var(--spacing-6); } .ms-xlarge { margin-inline-start: var(--spacing-8); } .ms-auto { margin-inline-start: auto; } .me-tiny { margin-inline-end: var(--spacing-2); } .me-small { margin-inline-end: var(--spacing-3); } .me-base { margin-inline-end: var(--spacing-4); } .me-medium { margin-inline-end: var(--spacing-5); } .me-large { margin-inline-end: var(--spacing-6); } .me-xlarge { margin-inline-end: var(--spacing-8); } .me-auto { margin-inline-end: auto; } /* ============================================================ GAP TOKENS ============================================================ */ .gap-tiny { gap: var(--spacing-2); } .gap-small { gap: var(--spacing-3); } .gap-base { gap: var(--spacing-4); } .gap-medium { gap: var(--spacing-5); } .gap-large { gap: var(--spacing-6); } .gap-xlarge { gap: var(--spacing-8); } .gap-x2large { gap: var(--spacing-10); } .gap-x3large { gap: var(--spacing-12); } .gap-x4large { gap: var(--spacing-14); } .gap-x5large { gap: var(--spacing-16); } .gapx-tiny { column-gap: var(--spacing-2); } .gapx-small { column-gap: var(--spacing-3); } .gapx-base { column-gap: var(--spacing-4); } .gapx-medium { column-gap: var(--spacing-5); } .gapx-large { column-gap: var(--spacing-6); } .gapx-xlarge { column-gap: var(--spacing-8); } .gapx-x2large { column-gap: var(--spacing-10); } .gapx-x3large { column-gap: var(--spacing-12); } .gapx-x4large { column-gap: var(--spacing-14); } .gapx-x5large { column-gap: var(--spacing-16); } .gapy-tiny { row-gap: var(--spacing-2); } .gapy-small { row-gap: var(--spacing-3); } .gapy-base { row-gap: var(--spacing-4); } .gapy-medium { row-gap: var(--spacing-5); } .gapy-large { row-gap: var(--spacing-6); } .gapy-xlarge { row-gap: var(--spacing-8); } .gapy-x2large { row-gap: var(--spacing-10); } .gapy-x3large { row-gap: var(--spacing-12); } .gapy-x4large { row-gap: var(--spacing-14); } .gapy-x5large { row-gap: var(--spacing-16); } /* ============================================================ FONT SIZE TOKENS ============================================================ */ .text-tiny { font-size: var(--font-xs); } .text-small { font-size: var(--font-sm); } .text-base { font-size: var(--font-base); } .text-medium { font-size: var(--font-lg); } .text-large { font-size: var(--font-xl); } .text-xlarge { font-size: var(--font-2xl); } .text-x2large { font-size: var(--font-3xl); } .text-x3large { font-size: var(--font-4xl); } .text-x4large { font-size: var(--font-5xl); } .text-x5large { font-size: var(--font-6xl); } .text-xs { font-size: var(--font-xs); } .text-sm { font-size: var(--font-sm); } .text-base { font-size: var(--font-base); } .text-lg { font-size: var(--font-lg); } .text-xl { font-size: var(--font-xl); } .text-2xl { font-size: var(--font-2xl); } .text-3xl { font-size: var(--font-3xl); } .text-4xl { font-size: var(--font-4xl); } .text-5xl { font-size: var(--font-5xl); } .text-6xl { font-size: var(--font-6xl); } .text-7xl { font-size: var(--font-7xl); } .text-8xl { font-size: var(--font-8xl); } .text-9xl { font-size: var(--font-9xl); } .text-10xl { font-size: var(--font-10xl); } /* ============================================================ FONT WEIGHT TOKENS ============================================================ */ .font-thin { font-weight: var(--font-thin, 100); } .font-extralight { font-weight: var(--font-extralight, 200); } .font-light { font-weight: var(--font-light, 300); } .font-normal { font-weight: var(--font-normal, 400); } .font-medium { font-weight: var(--font-medium, 500); } .font-semibold { font-weight: var(--font-semibold, 600); } .font-bold { font-weight: var(--font-bold, 700); } .font-extrabold { font-weight: var(--font-extrabold, 800); } .font-black { font-weight: var(--font-black, 900); } /* ============================================================ FONT FAMILY TOKENS ============================================================ */ .font-sans { font-family: var(--font-family-sans); } .font-serif { font-family: var(--font-family-serif); } .font-mono { font-family: var(--font-family-mono); } .font-display { font-family: var(--font-family-display); } .font-body { font-family: var(--font-family-body); } .font-heading { font-family: var(--font-family-heading); } /* ============================================================ TEXT ALIGNMENT TOKENS ============================================================ */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-start { text-align: var(--text-align-start); } .text-end { text-align: var(--text-align-end); } /* ============================================================ TEXT DECORATION TOKENS ============================================================ */ .underline { text-decoration: underline; } .overline { text-decoration: overline; } .line-through { text-decoration: line-through; } .no-underline { text-decoration: none; } /* ============================================================ TEXT TRANSFORM TOKENS ============================================================ */ .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } /* ============================================================ LETTER SPACING TOKENS ============================================================ */ .tracking-tight { letter-spacing: var(--letter-spacing-tight); } .tracking-normal { letter-spacing: var(--letter-spacing-normal); } .tracking-wide { letter-spacing: var(--letter-spacing-wide); } .tracking-wider { letter-spacing: var(--letter-spacing-wider); } .tracking-widest { letter-spacing: var(--letter-spacing-widest); } /* ============================================================ LINE HEIGHT TOKENS ============================================================ */ .leading-none { line-height: var(--line-height-none); } .leading-tight { line-height: var(--line-height-tight); } .leading-snug { line-height: var(--line-height-snug); } .leading-normal { line-height: var(--line-height-normal); } .leading-relaxed { line-height: var(--line-height-relaxed); } .leading-loose { line-height: var(--line-height-loose); } /* ============================================================ BORDER RADIUS TOKENS ============================================================ */ .radius-none { border-radius: var(--radius-none); } .radius-sm { border-radius: var(--radius-sm); } .radius-base { border-radius: var(--radius-base); } .radius-md { border-radius: var(--radius-md); } .radius-lg { border-radius: var(--radius-lg); } .radius-xl { border-radius: var(--radius-xl); } .radius-2xl { border-radius: var(--radius-2xl); } .radius-3xl { border-radius: var(--radius-3xl); } .radius-4xl { border-radius: var(--radius-4xl); } .radius-full { border-radius: var(--radius-full); } .radius-circle { border-radius: var(--radius-circle); } /* ============================================================ SHADOW TOKENS ============================================================ */ .shadow-none { box-shadow: none; } .shadow-xs { box-shadow: var(--shadow-xs); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-base { box-shadow: var(--shadow-base); } .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); } .shadow-3xl { box-shadow: var(--shadow-3xl); } .shadow-card { box-shadow: var(--shadow-card); } .shadow-card-hover { box-shadow: var(--shadow-card-hover); } .shadow-btn { box-shadow: var(--shadow-btn); } .shadow-btn-hover { box-shadow: var(--shadow-btn-hover); } .shadow-btn-active { box-shadow: var(--shadow-btn-active); } .shadow-dropdown { box-shadow: var(--shadow-dropdown); } .shadow-modal { box-shadow: var(--shadow-modal); } .shadow-popover { box-shadow: var(--shadow-popover); } .shadow-tooltip { box-shadow: var(--shadow-tooltip); } /* ============================================================ DISPLAY TOKENS ============================================================ */ .flex { display: flex; } .inline-flex { display: inline-flex; } .block { display: block; } .inline-block { display: inline-block; } .grid { display: grid; } .inline-grid { display: inline-grid; } .hidden { display: none; } .contents { display: contents; } /* ============================================================ FLEXBOX TOKENS ============================================================ */ .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .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-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-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-1 { flex: 1; } .flex-auto { flex: auto; } .flex-none { flex: none; } .flex-initial { flex: initial; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .flex-shrink { flex-shrink: 1; } .flex-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; } .self-baseline { align-self: baseline; } /* ============================================================ GRID TOKENS ============================================================ */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-none { grid-template-columns: none; } .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-5 { grid-column: span 5 / span 5; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-7 { grid-column: span 7 / span 7; } .col-span-8 { grid-column: span 8 / span 8; } .col-span-9 { grid-column: span 9 / span 9; } .col-span-10 { grid-column: span 10 / span 10; } .col-span-11 { grid-column: span 11 / span 11; } .col-span-12 { grid-column: span 12 / span 12; } .col-span-full { grid-column: 1 / -1; } .grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); } .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); } .grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); } .grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); } .grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); } .grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); } .grid-rows-none { grid-template-rows: none; } .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-5 { grid-row: span 5 / span 5; } .row-span-6 { grid-row: span 6 / span 6; } .row-span-full { grid-row: 1 / -1; } /* ============================================================ WIDTH TOKENS ============================================================ */ .w-0 { width: var(--spacing-0); } .w-px { width: var(--spacing-px); } .w-0\.5 { width: var(--spacing-0\.5); } .w-1 { width: var(--spacing-1); } .w-1\.5 { width: var(--spacing-1\.5); } .w-2 { width: var(--spacing-2); } .w-2\.5 { width: var(--spacing-2\.5); } .w-3 { width: var(--spacing-3); } .w-3\.5 { width: var(--spacing-3\.5); } .w-4 { width: var(--spacing-4); } .w-5 { width: var(--spacing-5); } .w-6 { width: var(--spacing-6); } .w-7 { width: var(--spacing-7); } .w-8 { width: var(--spacing-8); } .w-9 { width: var(--spacing-9); } .w-10 { width: var(--spacing-10); } .w-11 { width: var(--spacing-11); } .w-12 { width: var(--spacing-12); } .w-14 { width: var(--spacing-14); } .w-16 { width: var(--spacing-16); } .w-20 { width: var(--spacing-20); } .w-24 { width: var(--spacing-24); } .w-28 { width: var(--spacing-28); } .w-32 { width: var(--spacing-32); } .w-36 { width: var(--spacing-36); } .w-40 { width: var(--spacing-40); } .w-44 { width: var(--spacing-44); } .w-48 { width: var(--spacing-48); } .w-52 { width: var(--spacing-52); } .w-56 { width: var(--spacing-56); } .w-60 { width: var(--spacing-60); } .w-64 { width: var(--spacing-64); } .w-72 { width: var(--spacing-72); } .w-80 { width: var(--spacing-80); } .w-96 { width: var(--spacing-96); } .w-auto { width: auto; } .w-full { width: 100%; } .w-screen { width: 100vw; } .w-min { width: min-content; } .w-max { width: max-content; } .w-fit { width: fit-content; } .w-1\/2 { width: 50%; } .w-1\/3 { width: 33.333333%; } .w-2\/3 { width: 66.666667%; } .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%; } .w-1\/6 { width: 16.666667%; } .w-5\/6 { width: 83.333333%; } /* ============================================================ HEIGHT TOKENS ============================================================ */ .h-0 { height: var(--spacing-0); } .h-px { height: var(--spacing-px); } .h-0\.5 { height: var(--spacing-0\.5); } .h-1 { height: var(--spacing-1); } .h-1\.5 { height: var(--spacing-1\.5); } .h-2 { height: var(--spacing-2); } .h-2\.5 { height: var(--spacing-2\.5); } .h-3 { height: var(--spacing-3); } .h-3\.5 { height: var(--spacing-3\.5); } .h-4 { height: var(--spacing-4); } .h-5 { height: var(--spacing-5); } .h-6 { height: var(--spacing-6); } .h-7 { height: var(--spacing-7); } .h-8 { height: var(--spacing-8); } .h-9 { height: var(--spacing-9); } .h-10 { height: var(--spacing-10); } .h-11 { height: var(--spacing-11); } .h-12 { height: var(--spacing-12); } .h-14 { height: var(--spacing-14); } .h-16 { height: var(--spacing-16); } .h-20 { height: var(--spacing-20); } .h-24 { height: var(--spacing-24); } .h-28 { height: var(--spacing-28); } .h-32 { height: var(--spacing-32); } .h-36 { height: var(--spacing-36); } .h-40 { height: var(--spacing-40); } .h-44 { height: var(--spacing-44); } .h-48 { height: var(--spacing-48); } .h-52 { height: var(--spacing-52); } .h-56 { height: var(--spacing-56); } .h-60 { height: var(--spacing-60); } .h-64 { height: var(--spacing-64); } .h-72 { height: var(--spacing-72); } .h-80 { height: var(--spacing-80); } .h-96 { height: var(--spacing-96); } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .h-min { height: min-content; } .h-max { height: max-content; } .h-fit { height: fit-content; } .h-1\/2 { height: 50%; } .h-1\/3 { height: 33.333333%; } .h-2\/3 { height: 66.666667%; } .h-1\/4 { height: 25%; } .h-3\/4 { height: 75%; } .h-1\/5 { height: 20%; } .h-2\/5 { height: 40%; } .h-3\/5 { height: 60%; } .h-4\/5 { height: 80%; } .h-1\/6 { height: 16.666667%; } .h-5\/6 { height: 83.333333%; } /* ============================================================ MIN-WIDTH TOKENS ============================================================ */ .min-w-0 { min-width: var(--spacing-0); } .min-w-full { min-width: 100%; } .min-w-screen { min-width: 100vw; } .min-w-min { min-width: min-content; } .min-w-max { min-width: max-content; } .min-w-fit { min-width: fit-content; } /* ============================================================ MIN-HEIGHT TOKENS ============================================================ */ .min-h-0 { min-height: var(--spacing-0); } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .min-h-min { min-height: min-content; } .min-h-max { min-height: max-content; } .min-h-fit { min-height: fit-content; } /* ============================================================ MAX-WIDTH TOKENS ============================================================ */ .max-w-0 { max-width: var(--spacing-0); } .max-w-none { max-width: none; } .max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-full { max-width: 100%; } .max-w-screen { max-width: 100vw; } .max-w-min { max-width: min-content; } .max-w-max { max-width: max-content; } .max-w-fit { max-width: fit-content; } /* ============================================================ MAX-HEIGHT TOKENS ============================================================ */ .max-h-0 { max-height: var(--spacing-0); } .max-h-none { max-height: none; } .max-h-full { max-height: 100%; } .max-h-screen { max-height: 100vh; } .max-h-min { max-height: min-content; } .max-h-max { max-height: max-content; } .max-h-fit { max-height: fit-content; } /* ============================================================ POSITION TOKENS ============================================================ */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } .static { position: static; } .top-0 { top: var(--spacing-0); } .top-auto { top: auto; } .right-0 { right: var(--spacing-0); } .right-auto { right: auto; } .bottom-0 { bottom: var(--spacing-0); } .bottom-auto { bottom: auto; } .left-0 { left: var(--spacing-0); } .left-auto { left: auto; } .inset-0 { top: var(--spacing-0); right: var(--spacing-0); bottom: var(--spacing-0); left: var(--spacing-0); } .inset-auto { top: auto; right: auto; bottom: auto; left: auto; } .inset-x-0 { left: var(--spacing-0); right: var(--spacing-0); } .inset-y-0 { top: var(--spacing-0); bottom: var(--spacing-0); } /* ============================================================ Z-INDEX TOKENS ============================================================ */ .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: var(--z-auto); } .z-dropdown { z-index: var(--z-dropdown); } .z-sticky { z-index: var(--z-sticky); } .z-fixed { z-index: var(--z-fixed); } .z-modal-backdrop { z-index: var(--z-modal-backdrop); } .z-modal { z-index: var(--z-modal); } .z-popover { z-index: var(--z-popover); } .z-tooltip { z-index: var(--z-tooltip); } .z-toast { z-index: var(--z-toast); } /* ============================================================ OPACITY TOKENS ============================================================ */ .opacity-0 { opacity: var(--opacity-0); } .opacity-5 { opacity: var(--opacity-5); } .opacity-10 { opacity: var(--opacity-10); } .opacity-20 { opacity: var(--opacity-20); } .opacity-25 { opacity: var(--opacity-25); } .opacity-30 { opacity: var(--opacity-30); } .opacity-40 { opacity: var(--opacity-40); } .opacity-50 { opacity: var(--opacity-50); } .opacity-60 { opacity: var(--opacity-60); } .opacity-70 { opacity: var(--opacity-70); } .opacity-75 { opacity: var(--opacity-75); } .opacity-80 { opacity: var(--opacity-80); } .opacity-90 { opacity: var(--opacity-90); } .opacity-100 { opacity: var(--opacity-100); } /* ============================================================ TRANSITION TOKENS ============================================================ */ .transition-none { transition: none; } .transition-fast { transition: var(--transition-fast); } .transition-base { transition: var(--transition-base); } .transition-slow { transition: var(--transition-slow); } .transition-slower { transition: var(--transition-slower); } .transition-slide { transition: var(--transition-slide); } .transition-bounce { transition: var(--transition-bounce); } .transition-colors { transition: background-color var(--transition-duration-base) var(--transition-timing-ease), color var(--transition-duration-base) var(--transition-timing-ease), border-color var(--transition-duration-base) var(--transition-timing-ease); } .transition-opacity { transition: opacity var(--transition-duration-base) var(--transition-timing-ease); } .transition-shadow { transition: box-shadow var(--transition-duration-base) var(--transition-timing-ease); } .transition-transform { transition: transform var(--transition-duration-base) var(--transition-timing-ease); } .transition-all { transition: all var(--transition-duration-base) var(--transition-timing-ease); } /* ============================================================ BACKGROUND TOKENS ============================================================ */ .bg-body { background: var(--bg-body); } .bg-body-secondary { background: var(--bg-body-secondary); } .bg-card { background: var(--bg-card); } .bg-card-hover { background: var(--bg-card-hover); } .bg-card-active { background: var(--bg-card-active); } .bg-soft { background: var(--bg-soft); } .bg-soft-hover { background: var(--bg-soft-hover); } .bg-input { background: var(--bg-input); } .bg-input-hover { background: var(--bg-input-hover); } .bg-input-focus { background: var(--bg-input-focus); } .bg-muted { background: var(--bg-muted); } .bg-muted-hover { background: var(--bg-muted-hover); } .bg-overlay { background: var(--bg-overlay); } .bg-overlay-light { background: var(--bg-overlay-light); } .bg-overlay-dark { background: var(--bg-overlay-dark); } .bg-transparent { background: transparent; } /* ============================================================ TEXT COLOR TOKENS ============================================================ */ .text-body { color: var(--text-body); } .text-body-secondary { color: var(--text-body-secondary); } .text-muted { color: var(--text-muted); } .text-muted-light { color: var(--text-muted-light); } .text-inverse { color: var(--text-inverse); } .text-inverse-light { color: var(--text-inverse-light); } .text-disabled { color: var(--text-disabled); } .text-placeholder { color: var(--text-placeholder); } .text-link { color: var(--text-link); } .text-link-hover { color: var(--text-link-hover); } /* ============================================================ BORDER TOKENS ============================================================ */ .border { border: var(--border-width, 1px) solid var(--border-color); } .border-0 { border: 0; } .border-2 { border: 2px solid var(--border-color); } .border-4 { border: 4px solid var(--border-color); } .border-8 { border: 8px solid var(--border-color); } .border-t { border-top: var(--border-width, 1px) solid var(--border-color); } .border-r { border-right: var(--border-width, 1px) solid var(--border-color); } .border-b { border-bottom: var(--border-width, 1px) solid var(--border-color); } .border-l { border-left: var(--border-width, 1px) solid var(--border-color); } .border-x { border-left: var(--border-width, 1px) solid var(--border-color); border-right: var(--border-width, 1px) solid var(--border-color); } .border-y { border-top: var(--border-width, 1px) solid var(--border-color); border-bottom: var(--border-width, 1px) solid var(--border-color); } .border-color { border-color: var(--border-color); } .border-color-light { border-color: var(--border-color-light); } .border-color-dark { border-color: var(--border-color-dark); } .border-color-focus { border-color: var(--border-color-focus); } .border-color-error { border-color: var(--border-color-error); } .border-color-success { border-color: var(--border-color-success); } .border-color-warning { border-color: var(--border-color-warning); } .border-solid { border-style: solid; } .border-dashed { border-style: dashed; } .border-dotted { border-style: dotted; } .border-double { border-style: double; } .border-none { border-style: none; } /* ============================================================ OUTLINE TOKENS ============================================================ */ .outline-none { outline: none; } .outline { outline: var(--border-width, 1px) solid var(--border-color); } .outline-2 { outline: 2px solid var(--border-color); } .outline-4 { outline: 4px solid var(--border-color); } .outline-offset-2 { outline-offset: var(--spacing-0\.5); } .outline-offset-4 { outline-offset: var(--spacing-1); } /* ============================================================ VISIBILITY TOKENS ============================================================ */ .visible { visibility: visible; } .invisible { visibility: hidden; } /* ============================================================ LIST STYLE TOKENS ============================================================ */ .list-none { list-style: none; } .list-disc { list-style: disc; } .list-decimal { list-style: decimal; } .list-square { list-style: square; } /* ============================================================ VERTICAL ALIGN TOKENS ============================================================ */ .align-baseline { vertical-align: baseline; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-align: bottom; } .align-text-top { vertical-align: text-top; } .align-text-bottom { vertical-align: text-bottom; } .align-sub { vertical-align: sub; } .align-super { vertical-align: super; } /* ============================================================ TABLE TOKENS ============================================================ */ .table { display: table; } .table-auto { table-layout: auto; } .table-fixed { table-layout: fixed; } .table-caption { display: table-caption; } .table-cell { display: table-cell; } .table-column { display: table-column; } .table-column-group { display: table-column-group; } .table-footer-group { display: table-footer-group; } .table-header-group { display: table-header-group; } .table-row-group { display: table-row-group; } .table-row { display: table-row; } /* ============================================================ TRANSFORM TOKENS ============================================================ */ .scale-0 { transform: scale(0); } .scale-50 { transform: scale(0.5); } .scale-75 { transform: scale(0.75); } .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); } .scale-125 { transform: scale(1.25); } .scale-150 { transform: scale(1.5); } .rotate-0 { transform: rotate(0deg); } .rotate-45 { transform: rotate(45deg); } .rotate-90 { transform: rotate(90deg); } .rotate-180 { transform: rotate(180deg); } .rotate-270 { transform: rotate(270deg); } .rotate-360 { transform: rotate(360deg); } .translate-x-0 { transform: translateX(var(--spacing-0)); } .translate-x-px { transform: translateX(var(--spacing-px)); } .translate-x-0\.5 { transform: translateX(var(--spacing-0\.5)); } .translate-x-1 { transform: translateX(var(--spacing-1)); } .translate-x-1\.5 { transform: translateX(var(--spacing-1\.5)); } .translate-x-2 { transform: translateX(var(--spacing-2)); } .translate-x-3 { transform: translateX(var(--spacing-3)); } .translate-x-4 { transform: translateX(var(--spacing-4)); } .translate-x-5 { transform: translateX(var(--spacing-5)); } .translate-x-6 { transform: translateX(var(--spacing-6)); } .translate-x-8 { transform: translateX(var(--spacing-8)); } .translate-x-10 { transform: translateX(var(--spacing-10)); } .translate-x-12 { transform: translateX(var(--spacing-12)); } .translate-x-16 { transform: translateX(var(--spacing-16)); } .translate-x-20 { transform: translateX(var(--spacing-20)); } .translate-x-24 { transform: translateX(var(--spacing-24)); } .translate-x-32 { transform: translateX(var(--spacing-32)); } .translate-x-40 { transform: translateX(var(--spacing-40)); } .translate-x-48 { transform: translateX(var(--spacing-48)); } .translate-x-56 { transform: translateX(var(--spacing-56)); } .translate-x-64 { transform: translateX(var(--spacing-64)); } .translate-x-72 { transform: translateX(var(--spacing-72)); } .translate-x-80 { transform: translateX(var(--spacing-80)); } .translate-x-96 { transform: translateX(var(--spacing-96)); } .-translate-x-px { transform: translateX(calc(var(--spacing-px) * -1)); } .-translate-x-0\.5 { transform: translateX(calc(var(--spacing-0\.5) * -1)); } .-translate-x-1 { transform: translateX(calc(var(--spacing-1) * -1)); } .-translate-x-1\.5 { transform: translateX(calc(var(--spacing-1\.5) * -1)); } .-translate-x-2 { transform: translateX(calc(var(--spacing-2) * -1)); } .-translate-x-3 { transform: translateX(calc(var(--spacing-3) * -1)); } .-translate-x-4 { transform: translateX(calc(var(--spacing-4) * -1)); } .-translate-x-5 { transform: translateX(calc(var(--spacing-5) * -1)); } .-translate-x-6 { transform: translateX(calc(var(--spacing-6) * -1)); } .-translate-x-8 { transform: translateX(calc(var(--spacing-8) * -1)); } .-translate-x-10 { transform: translateX(calc(var(--spacing-10) * -1)); } .-translate-x-12 { transform: translateX(calc(var(--spacing-12) * -1)); } .translate-y-0 { transform: translateY(var(--spacing-0)); } .translate-y-px { transform: translateY(var(--spacing-px)); } .translate-y-0\.5 { transform: translateY(var(--spacing-0\.5)); } .translate-y-1 { transform: translateY(var(--spacing-1)); } .translate-y-1\.5 { transform: translateY(var(--spacing-1\.5)); } .translate-y-2 { transform: translateY(var(--spacing-2)); } .translate-y-3 { transform: translateY(var(--spacing-3)); } .translate-y-4 { transform: translateY(var(--spacing-4)); } .translate-y-5 { transform: translateY(var(--spacing-5)); } .translate-y-6 { transform: translateY(var(--spacing-6)); } .translate-y-8 { transform: translateY(var(--spacing-8)); } .translate-y-10 { transform: translateY(var(--spacing-10)); } .translate-y-12 { transform: translateY(var(--spacing-12)); } .translate-y-16 { transform: translateY(var(--spacing-16)); } .translate-y-20 { transform: translateY(var(--spacing-20)); } .translate-y-24 { transform: translateY(var(--spacing-24)); } .translate-y-32 { transform: translateY(var(--spacing-32)); } .translate-y-40 { transform: translateY(var(--spacing-40)); } .translate-y-48 { transform: translateY(var(--spacing-48)); } .translate-y-56 { transform: translateY(var(--spacing-56)); } .translate-y-64 { transform: translateY(var(--spacing-64)); } .translate-y-72 { transform: translateY(var(--spacing-72)); } .translate-y-80 { transform: translateY(var(--spacing-80)); } .translate-y-96 { transform: translateY(var(--spacing-96)); } .-translate-y-px { transform: translateY(calc(var(--spacing-px) * -1)); } .-translate-y-0\.5 { transform: translateY(calc(var(--spacing-0\.5) * -1)); } .-translate-y-1 { transform: translateY(calc(var(--spacing-1) * -1)); } .-translate-y-1\.5 { transform: translateY(calc(var(--spacing-1\.5) * -1)); } .-translate-y-2 { transform: translateY(calc(var(--spacing-2) * -1)); } .-translate-y-3 { transform: translateY(calc(var(--spacing-3) * -1)); } .-translate-y-4 { transform: translateY(calc(var(--spacing-4) * -1)); } .-translate-y-5 { transform: translateY(calc(var(--spacing-5) * -1)); } .-translate-y-6 { transform: translateY(calc(var(--spacing-6) * -1)); } .-translate-y-8 { transform: translateY(calc(var(--spacing-8) * -1)); } .-translate-y-10 { transform: translateY(calc(var(--spacing-10) * -1)); } .-translate-y-12 { transform: translateY(calc(var(--spacing-12) * -1)); } /* ============================================================ ASPECT RATIO TOKENS ============================================================ */ .aspect-auto { aspect-ratio: auto; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } .aspect-1\/1 { aspect-ratio: 1 / 1; } .aspect-4\/3 { aspect-ratio: 4 / 3; } .aspect-3\/4 { aspect-ratio: 3 / 4; } .aspect-16\/9 { aspect-ratio: 16 / 9; } .aspect-9\/16 { aspect-ratio: 9 / 16; } .aspect-21\/9 { aspect-ratio: 21 / 9; } /* ============================================================ ANIMATION TOKENS ============================================================ */ .animate-none { animation: none; } .animate-spin { animation: spin var(--animation-spin-duration) var(--animation-spin-timing) infinite; } .animate-ping { animation: ping var(--animation-ping-duration) var(--animation-ping-timing) infinite; } .animate-pulse { animation: pulse var(--animation-pulse-duration) var(--animation-pulse-timing) infinite; } .animate-bounce { animation: bounce var(--animation-bounce-duration) var(--animation-bounce-timing) infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(var(--animation-ping-scale)); opacity: 0; } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(var(--animation-pulse-scale)); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--animation-bounce-distance)); } } /* ============================================================ BACKDROP BLUR TOKENS ============================================================ */ .backdrop-blur-none { backdrop-filter: blur(0); } .backdrop-blur-sm { backdrop-filter: blur(4px); } .backdrop-blur-base { backdrop-filter: blur(8px); } .backdrop-blur-md { backdrop-filter: blur(12px); } .backdrop-blur-lg { backdrop-filter: blur(16px); } .backdrop-blur-xl { backdrop-filter: blur(20px); } .backdrop-blur-2xl { backdrop-filter: blur(24px); } /* ============================================================ MIX BLEND MODE TOKENS ============================================================ */ .mix-blend-normal { mix-blend-mode: normal; } .mix-blend-multiply { mix-blend-mode: multiply; } .mix-blend-screen { mix-blend-mode: screen; } .mix-blend-overlay { mix-blend-mode: overlay; } .mix-blend-darken { mix-blend-mode: darken; } .mix-blend-lighten { mix-blend-mode: lighten; } .mix-blend-color-dodge { mix-blend-mode: color-dodge; } .mix-blend-color-burn { mix-blend-mode: color-burn; } .mix-blend-hard-light { mix-blend-mode: hard-light; } .mix-blend-soft-light { mix-blend-mode: soft-light; } .mix-blend-difference { mix-blend-mode: difference; } .mix-blend-exclusion { mix-blend-mode: exclusion; } .mix-blend-hue { mix-blend-mode: hue; } .mix-blend-saturation { mix-blend-mode: saturation; } .mix-blend-color { mix-blend-mode: color; } .mix-blend-luminosity { mix-blend-mode: luminosity; } /* ============================================================ SCROLL MARGIN TOKENS ============================================================ */ .scroll-m-0 { scroll-margin: var(--spacing-0); } .scroll-m-2 { scroll-margin: var(--spacing-2); } .scroll-m-4 { scroll-margin: var(--spacing-4); } .scroll-m-8 { scroll-margin: var(--spacing-8); } .scroll-mt-0 { scroll-margin-top: var(--spacing-0); } .scroll-mt-2 { scroll-margin-top: var(--spacing-2); } .scroll-mt-4 { scroll-margin-top: var(--spacing-4); } .scroll-mt-8 { scroll-margin-top: var(--spacing-8); } /* ============================================================ SCROLL PADDING TOKENS ============================================================ */ .scroll-p-0 { scroll-padding: var(--spacing-0); } .scroll-p-2 { scroll-padding: var(--spacing-2); } .scroll-p-4 { scroll-padding: var(--spacing-4); } .scroll-p-8 { scroll-padding: var(--spacing-8); } .scroll-pt-0 { scroll-padding-top: var(--spacing-0); } .scroll-pt-2 { scroll-padding-top: var(--spacing-2); } .scroll-pt-4 { scroll-padding-top: var(--spacing-4); } .scroll-pt-8 { scroll-padding-top: var(--spacing-8); } /* ============================================================ SNAP TOKENS ============================================================ */ .snap-none { scroll-snap-type: none; } .snap-x { scroll-snap-type: x; } .snap-y { scroll-snap-type: y; } .snap-both { scroll-snap-type: both; } .snap-mandatory { scroll-snap-type: mandatory; } .snap-proximity { scroll-snap-type: proximity; } .snap-start { scroll-snap-align: start; } .snap-center { scroll-snap-align: center; } .snap-end { scroll-snap-align: end; } .snap-align-none { scroll-snap-align: none; } .snap-stop-normal { scroll-snap-stop: normal; } .snap-stop-always { scroll-snap-stop: always; } /* ============================================================ INTERACTIVE TOKENS ============================================================ */ .hover { transition: var(--transition-base); } .hover:hover { transform: scale(1.05); box-shadow: var(--shadow-btn); } .hover-scale { transition: var(--transition-base); } .hover-scale:hover { transform: scale(1.1); } .hover-lift { transition: var(--transition-base); } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-btn-hover); } .hover-glow { transition: var(--transition-base); } .hover-glow:hover { filter: drop-shadow(0 0 20px var(--color-primary)); } .pulse { animation: pulse var(--animation-pulse-duration) var(--animation-pulse-timing) infinite; } .glow { animation: glow var(--animation-glow-duration) var(--animation-glow-timing) infinite; } @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) var(--animation-glow-intensity-start), transparent)); } 50% { filter: drop-shadow(0 0 25px color-mix(in srgb, var(--color-primary) var(--animation-glow-intensity-end), transparent)); } } .bounce { animation: bounce var(--animation-bounce-duration) var(--animation-bounce-timing) infinite; } .ripple { position: relative; overflow: visible !important; } .ripple::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--color-primary); animation: ripple 1.5s ease-out infinite; opacity: 0; pointer-events: none; } @keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } .shake { animation: shake var(--animation-shake-duration) var(--animation-shake-timing) infinite; } @keyframes shake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(calc(var(--animation-shake-angle) * -1)); } 75% { transform: rotate(var(--animation-shake-angle)); } } .blink { animation: blink var(--animation-blink-duration) var(--animation-blink-timing) infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: var(--animation-blink-opacity); } } .live { animation: live var(--animation-live-duration) var(--animation-live-timing) infinite; } @keyframes live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(var(--animation-live-scale)); } } /* ============================================================ COLOR TOKENS - SOLID (All variants) ============================================================ */ .solid-primary { background: var(--color-primary) !important; color: var(--text-inverse) !important; } .solid-primary:hover { background: var(--color-primary-hover) !important; } .solid-secondary { background: var(--color-secondary) !important; color: var(--text-inverse) !important; } .solid-secondary:hover { background: var(--color-secondary-hover) !important; } .solid-success { background: var(--color-success) !important; color: var(--text-inverse) !important; } .solid-success:hover { background: var(--color-success-hover) !important; } .solid-danger { background: var(--color-danger) !important; color: var(--text-inverse) !important; } .solid-danger:hover { background: var(--color-danger-hover) !important; } .solid-warn { background: var(--color-warn) !important; color: var(--text-inverse) !important; } .solid-warn:hover { background: var(--color-warn-hover) !important; } .solid-accent { background: var(--color-accent) !important; color: var(--text-inverse) !important; } .solid-accent:hover { background: var(--color-accent-hover) !important; } .solid-info { background: var(--color-info) !important; color: var(--text-inverse) !important; } .solid-info:hover { background: var(--color-info-hover) !important; } .solid-muted { background: var(--bg-muted) !important; color: var(--text-inverse) !important; } /* ============================================================ COLOR TOKENS - SOFT ============================================================ */ .soft-primary { background: color-mix(in srgb, var(--color-primary) 15%, var(--bg-card)) !important; color: var(--color-primary) !important; } .soft-primary:hover { background: color-mix(in srgb, var(--color-primary) 25%, var(--bg-card)) !important; } .soft-secondary { background: color-mix(in srgb, var(--color-secondary) 15%, var(--bg-card)) !important; color: var(--color-secondary) !important; } .soft-secondary:hover { background: color-mix(in srgb, var(--color-secondary) 25%, var(--bg-card)) !important; } .soft-success { background: color-mix(in srgb, var(--color-success) 15%, var(--bg-card)) !important; color: var(--color-success) !important; } .soft-success:hover { background: color-mix(in srgb, var(--color-success) 25%, var(--bg-card)) !important; } .soft-danger { background: color-mix(in srgb, var(--color-danger) 15%, var(--bg-card)) !important; color: var(--color-danger) !important; } .soft-danger:hover { background: color-mix(in srgb, var(--color-danger) 25%, var(--bg-card)) !important; } .soft-warn { background: color-mix(in srgb, var(--color-warn) 15%, var(--bg-card)) !important; color: var(--color-warn) !important; } .soft-warn:hover { background: color-mix(in srgb, var(--color-warn) 25%, var(--bg-card)) !important; } .soft-accent { background: color-mix(in srgb, var(--color-accent) 15%, var(--bg-card)) !important; color: var(--color-accent) !important; } .soft-accent:hover { background: color-mix(in srgb, var(--color-accent) 25%, var(--bg-card)) !important; } .soft-info { background: color-mix(in srgb, var(--color-info) 15%, var(--bg-card)) !important; color: var(--color-info) !important; } .soft-info:hover { background: color-mix(in srgb, var(--color-info) 25%, var(--bg-card)) !important; } .soft-muted { background: var(--bg-muted) !important; color: var(--text-muted) !important; } /* ============================================================ COLOR TOKENS - OUTLINE ============================================================ */ .outline-primary { background: transparent !important; color: var(--color-primary) !important; border: var(--btn-border-width) solid var(--color-primary) !important; } .outline-primary:hover { background: var(--color-primary) !important; color: var(--text-inverse) !important; } .outline-secondary { background: transparent !important; color: var(--color-secondary) !important; border: var(--btn-border-width) solid var(--color-secondary) !important; } .outline-secondary:hover { background: var(--color-secondary) !important; color: var(--text-inverse) !important; } .outline-success { background: transparent !important; color: var(--color-success) !important; border: var(--btn-border-width) solid var(--color-success) !important; } .outline-success:hover { background: var(--color-success) !important; color: var(--text-inverse) !important; } .outline-danger { background: transparent !important; color: var(--color-danger) !important; border: var(--btn-border-width) solid var(--color-danger) !important; } .outline-danger:hover { background: var(--color-danger) !important; color: var(--text-inverse) !important; } .outline-warn { background: transparent !important; color: var(--color-warn) !important; border: var(--btn-border-width) solid var(--color-warn) !important; } .outline-warn:hover { background: var(--color-warn) !important; color: var(--text-inverse) !important; } .outline-accent { background: transparent !important; color: var(--color-accent) !important; border: var(--btn-border-width) solid var(--color-accent) !important; } .outline-accent:hover { background: var(--color-accent) !important; color: var(--text-inverse) !important; } .outline-info { background: transparent !important; color: var(--color-info) !important; border: var(--btn-border-width) solid var(--color-info) !important; } .outline-info:hover { background: var(--color-info) !important; color: var(--text-inverse) !important; } .outline-muted { background: transparent !important; color: var(--text-muted) !important; border: var(--btn-border-width) solid var(--border-color) !important; } /* ============================================================ COLOR TOKENS - GHOST ============================================================ */ .ghost-primary { background: transparent !important; color: var(--color-primary) !important; } .ghost-primary:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; } .ghost-secondary { background: transparent !important; color: var(--color-secondary) !important; } .ghost-secondary:hover { background: color-mix(in srgb, var(--color-secondary) 10%, transparent) !important; } .ghost-success { background: transparent !important; color: var(--color-success) !important; } .ghost-success:hover { background: color-mix(in srgb, var(--color-success) 10%, transparent) !important; } .ghost-danger { background: transparent !important; color: var(--color-danger) !important; } .ghost-danger:hover { background: color-mix(in srgb, var(--color-danger) 10%, transparent) !important; } .ghost-warn { background: transparent !important; color: var(--color-warn) !important; } .ghost-warn:hover { background: color-mix(in srgb, var(--color-warn) 10%, transparent) !important; } .ghost-accent { background: transparent !important; color: var(--color-accent) !important; } .ghost-accent:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important; } .ghost-info { background: transparent !important; color: var(--color-info) !important; } .ghost-info:hover { background: color-mix(in srgb, var(--color-info) 10%, transparent) !important; } .ghost-muted { background: transparent !important; color: var(--text-muted) !important; } /* ============================================================ COLOR TOKENS - GLASS ============================================================ */ .glass-primary { background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-secondary { background: rgba(255, 255, 255, 0.12) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: var(--shadow-glass) !important; } .glass-success { background: rgba(136, 195, 15, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(136, 195, 15, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-danger { background: rgba(200, 29, 17, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(200, 29, 17, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-warn { background: rgba(217, 144, 88, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(217, 144, 88, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-accent { background: rgba(0, 166, 147, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(0, 166, 147, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-info { background: rgba(21, 169, 214, 0.15) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-inverse) !important; border: 1px solid rgba(21, 169, 214, 0.2) !important; box-shadow: var(--shadow-glass) !important; } .glass-muted { background: rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; color: var(--text-muted) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: var(--shadow-glass) !important; } /* ============================================================ COLOR TOKENS - GRADIENT ============================================================ */ .gradient-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important; color: var(--text-inverse) !important; } .gradient-primary:hover { background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent-hover)) !important; } .gradient-secondary { background: linear-gradient(135deg, var(--color-secondary), var(--color-info)) !important; color: var(--text-inverse) !important; } .gradient-secondary:hover { background: linear-gradient(135deg, var(--color-secondary-hover), var(--color-info-hover)) !important; } .gradient-success { background: linear-gradient(135deg, var(--color-success), var(--persian-green-deep)) !important; color: var(--text-inverse) !important; } .gradient-success:hover { background: linear-gradient(135deg, var(--color-success-hover), var(--persian-green)) !important; } .gradient-danger { background: linear-gradient(135deg, var(--color-danger), var(--persian-plum)) !important; color: var(--text-inverse) !important; } .gradient-danger:hover { background: linear-gradient(135deg, var(--color-danger-hover), var(--persian-red)) !important; } .gradient-warn { background: linear-gradient(135deg, var(--color-warn), var(--persian-peper)) !important; color: var(--text-inverse) !important; } .gradient-warn:hover { background: linear-gradient(135deg, var(--color-warn-hover), var(--persian-orange)) !important; } .gradient-accent { background: linear-gradient(135deg, var(--color-accent), var(--persian-teal)) !important; color: var(--text-inverse) !important; } .gradient-accent:hover { background: linear-gradient(135deg, var(--color-accent-hover), var(--persian-teal-deep)) !important; } .gradient-info { background: linear-gradient(135deg, var(--color-info), var(--persian-blue)) !important; color: var(--text-inverse) !important; } .gradient-info:hover { background: linear-gradient(135deg, var(--color-info-hover), var(--persian-medium-blue)) !important; } /* ============================================================ CURSOR TOKENS ============================================================ */ .cursor-pointer { cursor: pointer; } .cursor-default { cursor: default; } .cursor-wait { cursor: wait; } .cursor-text { cursor: text; } .cursor-move { cursor: move; } .cursor-not-allowed { cursor: not-allowed; } .cursor-grab { cursor: grab; } .cursor-grabbing { cursor: grabbing; } .cursor-zoom-in { cursor: zoom-in; } .cursor-zoom-out { cursor: zoom-out; } /* ============================================================ OBJECT FIT TOKENS ============================================================ */ .object-contain { object-fit: contain; } .object-cover { object-fit: cover; } .object-fill { object-fit: fill; } .object-none { object-fit: none; } .object-scale-down { object-fit: scale-down; } .object-top { object-position: top; } .object-bottom { object-position: bottom; } .object-left { object-position: left; } .object-right { object-position: right; } .object-center { object-position: center; } /* ============================================================ POINTER EVENTS TOKENS ============================================================ */ .pointer-events-none { pointer-events: none; } .pointer-events-auto { pointer-events: auto; } /* ============================================================ USER SELECT TOKENS ============================================================ */ .select-none { user-select: none; } .select-text { user-select: text; } .select-all { user-select: all; } .select-auto { user-select: auto; } /* ============================================================ OVERFLOW TOKENS ============================================================ */ .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-scroll { overflow: scroll; } .overflow-clip { overflow: clip; } .overflow-x-auto { overflow-x: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-visible { overflow-x: visible; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-auto { overflow-y: auto; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-visible { overflow-y: visible; } .overflow-y-scroll { overflow-y: scroll; } /* ============================================================ WHITE-SPACE TOKENS ============================================================ */ .whitespace-normal { white-space: normal; } .whitespace-nowrap { white-space: nowrap; } .whitespace-pre { white-space: pre; } .whitespace-pre-line { white-space: pre-line; } .whitespace-pre-wrap { white-space: pre-wrap; } /* ============================================================ WORD BREAK TOKENS ============================================================ */ .break-normal { word-break: normal; overflow-wrap: normal; } .break-words { overflow-wrap: break-word; } .break-all { word-break: break-all; } .break-keep { word-break: keep-all; }