/* === TEXT ALIGNMENT === */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* === TOKENS (usado com margin/padding) === */
:root {
    /* spacing */
    --spacing-1x: 4px;
    --spacing-2x: 8px;
    --spacing-3x: 12px;
    --spacing-4x: 16px;
    --spacing-5x: 20px;
    --spacing-6x: 24px;
    --spacing-7x: 32px;
    --spacing-8x: 40px;
    --spacing-9x: 48px;
    --spacing-10x: 64px;

    /* radius */
    --radius-sm: var(--spacing-1x);
    --radius-md: var(--spacing-2x);
    --radius-lg: var(--spacing-3x);
    --radius-infinity: 99px;  

    /* font family */
    --font-main: 'Lato', sans-serif;
    --font-heading: 'Montserrat', sans-serif;

    /* font size */
    --text-xs: 0.75rem; 
    --text-sm: 0.875rem; 
    --text-base: 1rem; 
    --text-lg: 1.125rem; 
    --text-xl: 1.25rem; 
}

/* === FONT FAMILY === */
.font-main    { font-family: var(--font-main) }
.font-heading { font-family: var(--font-heading) }

/* === FONT WEIGHT === */
.fw-400 { font-weight: 400;}
.fw-500 { font-weight: 500;}
.fw-600 { font-weight: 600;}
.fw-700 { font-weight: 700;}

/* === FONT SIZE === */
.text-xs { font-size: var(--text-xs) }
.text-sm { font-size: var(--text-sm) }
.text-base { font-size: var(--text-base) }
.text-lg { font-size: var(--text-lg) }
.text-xl { font-size: var(--text-xl) }

/* === TEXT TRANSFORM === */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* === BORDER RADIUS === */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; width: 100%; overflow-x: hidden; }
body { font-family: var(--font-main); font-size: var(--text-base); }
button, input, select, textarea { font-family: inherit; font-size: 100% }
img, video { max-width: 100%; height: auto; display: block }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) }

/* === DISPLAY === */
.d-none       { display: none; }
.d-block      { display: block; }
.d-inline     { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex       { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid       { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-table      { display: table; }
.d-table-row  { display: table-row; }
.d-table-cell { display: table-cell; }

/* === VISIBILITY === */
.visible   { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-half { opacity: 0.5; }
.opacity-1 {opacity: 1}

/* === OVERFLOW === */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-scroll { overflow: scroll; }

.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* === POSITION === */
.static     { position: static; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.fixed      { position: fixed; }
.sticky     { position: sticky; }

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

.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }
.z-max { z-index: 9999; }

/* === PADDING === */
.p-1x { padding: var(--spacing-1x); }
.p-2x { padding: var(--spacing-2x); }
.p-3x { padding: var(--spacing-3x); }
.p-4x { padding: var(--spacing-4x); }
.p-5x { padding: var(--spacing-5x); }
.p-6x { padding: var(--spacing-6x); }
.p-7x { padding: var(--spacing-7x); }
.p-8x { padding: var(--spacing-8x); }
.p-9x { padding: var(--spacing-9x); }
.p-10x { padding: var(--spacing-10x); }

.pt-1x { padding-top: var(--spacing-1x); }
.pt-2x { padding-top: var(--spacing-2x); }
.pt-3x { padding-top: var(--spacing-3x); }
.pt-4x { padding-top: var(--spacing-4x); }
.pt-5x { padding-top: var(--spacing-5x); }
.pt-6x { padding-top: var(--spacing-6x); }
.pt-7x { padding-top: var(--spacing-7x); }
.pt-8x { padding-top: var(--spacing-8x); }
.pt-9x { padding-top: var(--spacing-9x); }
.pt-10x { padding-top: var(--spacing-10x); }

.pb-1x { padding-bottom: var(--spacing-1x); }
.pb-2x { padding-bottom: var(--spacing-2x); }
.pb-3x { padding-bottom: var(--spacing-3x); }
.pb-4x { padding-bottom: var(--spacing-4x); }
.pb-5x { padding-bottom: var(--spacing-5x); }
.pb-6x { padding-bottom: var(--spacing-6x); }
.pb-7x { padding-bottom: var(--spacing-7x); }
.pb-8x { padding-bottom: var(--spacing-8x); }
.pb-9x { padding-bottom: var(--spacing-9x); }
.pb-10x { padding-bottom: var(--spacing-10x); }

.pl-1x { padding-left: var(--spacing-1x); }
.pl-2x { padding-left: var(--spacing-2x); }
.pl-3x { padding-left: var(--spacing-3x); }
.pl-4x { padding-left: var(--spacing-4x); }
.pl-5x { padding-left: var(--spacing-5x); }
.pl-6x { padding-left: var(--spacing-6x); }
.pl-7x { padding-left: var(--spacing-7x); }
.pl-8x { padding-left: var(--spacing-8x); }
.pl-9x { padding-left: var(--spacing-9x); }
.pl-10x { padding-left: var(--spacing-10x); }

.pr-1x { padding-right: var(--spacing-1x); }
.pr-2x { padding-right: var(--spacing-2x); }
.pr-3x { padding-right: var(--spacing-3x); }
.pr-4x { padding-right: var(--spacing-4x); }
.pr-5x { padding-right: var(--spacing-5x); }
.pr-6x { padding-right: var(--spacing-6x); }
.pr-7x { padding-right: var(--spacing-7x); }
.pr-8x { padding-right: var(--spacing-8x); }
.pr-9x { padding-right: var(--spacing-9x); }
.pr-10x { padding-right: var(--spacing-10x); }

/* === MARGIN === */
.m-1x { margin: var(--spacing-1x); }
.m-2x { margin: var(--spacing-2x); }
.m-3x { margin: var(--spacing-3x); }
.m-4x { margin: var(--spacing-4x); }
.m-5x { margin: var(--spacing-5x); }
.m-6x { margin: var(--spacing-6x); }
.m-7x { margin: var(--spacing-7x); }
.m-8x { margin: var(--spacing-8x); }
.m-9x { margin: var(--spacing-9x); }
.m-10x { margin: var(--spacing-10x); }

.mt-1x { margin-top: var(--spacing-1x); }
.mt-2x { margin-top: var(--spacing-2x); }
.mt-3x { margin-top: var(--spacing-3x); }
.mt-4x { margin-top: var(--spacing-4x); }
.mt-5x { margin-top: var(--spacing-5x); }
.mt-6x { margin-top: var(--spacing-6x); }
.mt-7x { margin-top: var(--spacing-7x); }
.mt-8x { margin-top: var(--spacing-8x); }
.mt-9x { margin-top: var(--spacing-9x); }
.mt-10x { margin-top: var(--spacing-10x); }

.mb-1x { margin-bottom: var(--spacing-1x); }
.mb-2x { margin-bottom: var(--spacing-2x); }
.mb-3x { margin-bottom: var(--spacing-3x); }
.mb-4x { margin-bottom: var(--spacing-4x); }
.mb-5x { margin-bottom: var(--spacing-5x); }
.mb-6x { margin-bottom: var(--spacing-6x); }
.mb-7x { margin-bottom: var(--spacing-7x); }
.mb-8x { margin-bottom: var(--spacing-8x); }
.mb-9x { margin-bottom: var(--spacing-9x); }
.mb-10x { margin-bottom: var(--spacing-10x); }

.ml-1x { margin-left: var(--spacing-1x); }
.ml-2x { margin-left: var(--spacing-2x); }
.ml-3x { margin-left: var(--spacing-3x); }
.ml-4x { margin-left: var(--spacing-4x); }
.ml-5x { margin-left: var(--spacing-5x); }
.ml-6x { margin-left: var(--spacing-6x); }
.ml-7x { margin-left: var(--spacing-7x); }
.ml-8x { margin-left: var(--spacing-8x); }
.ml-9x { margin-left: var(--spacing-9x); }
.ml-10x { margin-left: var(--spacing-10x); }

.mr-1x { margin-right: var(--spacing-1x); }
.mr-2x { margin-right: var(--spacing-2x); }
.mr-3x { margin-right: var(--spacing-3x); }
.mr-4x { margin-right: var(--spacing-4x); }
.mr-5x { margin-right: var(--spacing-5x); }
.mr-6x { margin-right: var(--spacing-6x); }
.mr-7x { margin-right: var(--spacing-7x); }
.mr-8x { margin-right: var(--spacing-8x); }
.mr-9x { margin-right: var(--spacing-9x); }
.mr-10x { margin-right: var(--spacing-10x); }

/* === WIDTHS === */
.w-full       { width: 100%; }
.w-half       { width: 50%; }
.w-1-3        { width: 33.33%; }
.w-2-3        { width: 66.66%; }

.max-w-600    { max-width: 600px; margin-left: auto; margin-right: auto; }
.max-w-800    { max-width: 800px; margin-left: auto; margin-right: auto; }
.max-w-960    { max-width: 960px; margin-left: auto; margin-right: auto; }
.max-w-1200   { max-width: 1200px; margin-left: auto; margin-right: auto; }
.max-w-screen { max-width: 100vw; }

/* === FLEX === */
.flex-row         { flex-direction: row; }
.flex-column      { flex-direction: column; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }

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

.items-start      { align-items: flex-start; }
.items-center     { align-items: center; }
.items-end        { align-items: flex-end; }
.items-stretch    { align-items: stretch; }

.self-start       { align-self: flex-start; }
.self-center      { align-self: center; }
.self-end         { align-self: flex-end; }

/* === GRID === */
.grid-cols-1      { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2      { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3      { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4      { grid-template-columns: repeat(4, 1fr); }

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

.col-span-1       { grid-column: span 1 / span 1; }
.col-span-2       { grid-column: span 2 / span 2; }
.col-span-full    { grid-column: 1 / -1; }

.row-span-1       { grid-row: span 1 / span 1; }
.row-span-2       { grid-row: span 2 / span 2; }

/* === GAP === */
.gap-1x           { gap: var(--spacing-1x); }
.gap-2x           { gap: var(--spacing-2x); }
.gap-3x           { gap: var(--spacing-3x); }
.gap-4x           { gap: var(--spacing-4x); }
.gap-5x           { gap: var(--spacing-5x); }
.gap-6x           { gap: var(--spacing-6x); }
.gap-7x           { gap: var(--spacing-7x); }
.gap-8x           { gap: var(--spacing-8x); }
.gap-9x           { gap: var(--spacing-9x); }
.gap-10x           { gap: var(--spacing-10x); }


/* === TRANSFORM === */
.invert-x { transform: scaleX(-1) }
.invert-y { transform: scaleY(-1) }