/* ==========================================================================
   LUXURY MINIMAL - Estilos Globais (v2.0)
   Design editorial, minimalismo puro, interações sofisticadas
   ========================================================================== */

/* ---- Body e Fundo ---- */
body {
	background: var(--white);
	color: var(--black);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.6;
	font-weight: var(--font-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Tipografia Geral ---- */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-black);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--black);
	margin: 0;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
	margin: 0 0 var(--space-md) 0;
	color: var(--gray-medium);
	line-height: 1.7;
}

/* ---- Links ---- */
a {
	color: var(--black);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease);
	position: relative;
}

a:hover {
	color: var(--gray-medium);
}

/* ---- Botões Gerais ---- */
button,
.button,
.btn {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1em 2em;
	border: 1px solid var(--black);
	background: var(--black);
	color: var(--white);
	cursor: pointer;
	transition: all var(--dur-base) var(--ease);
	position: relative;
	overflow: hidden;
}

button:hover,
.button:hover,
.btn:hover {
	background: var(--white);
	color: var(--black);
}

button:active,
.button:active,
.btn:active {
	opacity: 0.8;
}

/* ---- Inputs ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	padding: 0.75em;
	border: 1px solid var(--line-color-strong);
	background: var(--white);
	color: var(--black);
	transition: all var(--dur-base) var(--ease);
	border-radius: var(--radius-xs);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--black);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

/* ---- Dividers ---- */
hr,
.divider {
	height: 1px;
	background: var(--line-color-medium);
	border: none;
	margin: var(--space-lg) 0;
}

/* ---- Listas ---- */
ul, ol {
	margin: 0 0 var(--space-md) 0;
	padding-left: 1.5em;
	color: var(--gray-medium);
}

li {
	margin-bottom: var(--space-xs);
	line-height: 1.7;
}

/* ---- Tabelas ---- */
table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-lg) 0;
}

th {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	text-align: left;
	padding: var(--space-sm);
	border-bottom: 1px solid var(--line-color-strong);
	background: var(--off-white);
	color: var(--black);
}

td {
	padding: var(--space-sm);
	border-bottom: 1px solid var(--line-color-medium);
	color: var(--gray-medium);
}

/* ---- Blockquotes ---- */
blockquote {
	margin: var(--space-lg) 0;
	padding-left: var(--space-md);
	border-left: 2px solid var(--black);
	color: var(--gray-medium);
	font-style: italic;
	font-size: var(--fs-md);
	line-height: 1.8;
}

/* ---- Código ---- */
code,
pre {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	background: var(--off-white);
	color: var(--charcoal);
	padding: 0.25em 0.5em;
	border-radius: var(--radius-xs);
}

pre {
	padding: var(--space-md);
	overflow-x: auto;
	margin: var(--space-lg) 0;
}

/* ---- Imagens ---- */
img {
	max-width: 100%;
	height: auto;
	display: block;
	transition: opacity var(--dur-base) var(--ease);
}

img:hover {
	opacity: 0.95;
}

/* ---- Containers ---- */
.container,
.section {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

.section {
	padding: var(--space-xl) var(--container-pad);
}

/* ---- Grid Utilities ---- */
.grid {
	display: grid;
	gap: var(--space-lg);
}

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

@media (max-width: 768px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.grid-2 { grid-template-columns: 1fr; }
}

/* ---- Flex Utilities ---- */
.flex {
	display: flex;
	gap: var(--space-md);
}

.flex-center {
	align-items: center;
	justify-content: center;
}

.flex-between {
	align-items: center;
	justify-content: space-between;
}

/* ---- Espaçamento Utilities ---- */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* ---- Tipografia Utilities ---- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-black { font-weight: var(--font-weight-black); }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.text-black { color: var(--black); }
.text-gray { color: var(--gray-medium); }
.text-light-gray { color: var(--gray-light); }

/* ---- Sombras Utilities ---- */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ---- Display Utilities ---- */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ---- Opacidade ---- */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ---- Transições ---- */
.transition-fast { transition: all var(--dur-fast) var(--ease); }
.transition-base { transition: all var(--dur-base) var(--ease); }
.transition-slow { transition: all var(--dur-slow) var(--ease); }

/* ---- Responsividade ---- */
@media (max-width: 768px) {
	.hide-mobile { display: none; }
	.show-mobile { display: block; }

	h1 { font-size: var(--fs-xl); }
	h2 { font-size: var(--fs-lg); }
	h3 { font-size: var(--fs-md); }

	.section {
		padding: var(--space-lg) var(--container-pad);
	}
}

@media (min-width: 769px) {
	.hide-desktop { display: none; }
	.show-desktop { display: block; }
}

/* ---- Acessibilidade ---- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---- Print ---- */
@media print {
	body {
		background: var(--white);
		color: var(--black);
	}

	a {
		color: var(--black);
		text-decoration: underline;
	}

	button,
	.button,
	input[type="button"],
	input[type="submit"] {
		display: none;
	}
}
