/* ---------------------------------- */
/* Base Variables (fallback versions) */
/* ---------------------------------- */

:root {
	/* ===== CORE BLACKS ===== */
	--black: #000000;
	--faded-black: #101010;
	--faded-black-dark: #0c0c0c;

	/* ===== CORE WHITES ===== */
	--white: #ffffff;
	--off-white: #fffdf7;

	/* ===== GREYS ===== */
	--grey-100: #f7f7f7;
	--grey-200: #eeeeee;
	--grey-300: #e0e0e0;
	--grey-400: #c7c7c7;
	--grey-500: #9b9b9b;
	--grey-600: #6f6f6f;
	--grey-800: #2a2a2a;
	--dark-grey: #424242;

	/* ===== BACKGROUNDS ===== */
	--background-page: #fffdf7;
	--background-section: #faf6f2;
	--background-card: #ffffff;
	--background-inverse: #101010;

	/* ===== TEXT ===== */
	--text-primary: #101010;
	--text-secondary: #424242;
	--text-muted: rgba(16, 16, 16, 0.6);
	--text-inverse: #ffffff;

	/* ===== BORDERS ===== */
	--border-default: rgba(0, 0, 0, 0.1);
	--border-strong: rgba(0, 0, 0, 0.2);
	--border-inverse: rgba(255, 255, 255, 0.2);

	/* ===== BUTTON: PRIMARY ===== */
	--primary: #101010;
	--primary-foreground: #fffdf7;
	--primary-hover: #fffdf7;
	--primary-pressed: #ffffff;
	--primary-border: #fffdf7;
	--primary-border-hover: #fffdf7;
	--primary-foreground-hover: #101010;
	--primary-foreground-active: #101010;

	/* ===== BUTTON: SECONDARY ===== */
	--secondary: #fffdf7;
	--secondary-foreground: #101010;
	--secondary-border: #101010;
	--secondary-hover: #101010;
	--secondary-pressed: #000000;
	--secondary-border-hover: #fffdf7;
	--secondary-foreground-hover: #fffdf7;
	--secondary-foreground-active: #fffdf7;

	/* ===== STATES ===== */
	--disabled: #eeeeee;
	--disabled-foreground: rgba(16, 16, 16, 0.4);
	--disabled-border: rgba(0, 0, 0, 0.08);
	--focus-ring: rgba(0, 0, 0, 0.4);

	/* ===== SHADOW ===== */
	--shadow: rgba(0, 0, 0, 0.2);

	/* ===== RADIUS ===== */
	--br-md: 8px;
	--br-btn: 222px;

	/* ===== SPACING (Needed For Buttons) ===== */
	--spacing-2: 0.25rem;
	--spacing-4: 0.5rem;
	--spacing-6: 0.75rem;
	--spacing-8: 1rem;
	--spacing-9: 1.125rem;
	--spacing-10: 1.25rem;
	--spacing-12: 2rem;

	/* ===== TYPOGRAPHY ===== */
	/* Small text */
	--fs-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);

	/* Body / medium */
	--fs-md: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);

	/* Large */
	--fs-lg: clamp(1.125rem, 1.05rem + 0.6vw, 1.375rem);

	/* H2 */
	--fs-h2: clamp(1.75rem, 1.4rem + 2vw, 2.375rem);

	/* Display 1 */
	--fs-d1: clamp(2.25rem, 1.8rem + 2.5vw, 3.375rem);

	/* Hero */
	--fs-hero: clamp(2.75rem, 6vw, 8rem);
	--fw-highlight: 700;
	--lh-base: 1.6;
	--button-md-mod: 0.04rem;

	/* ===== TRANSITIONS ===== */
	--duration-normal_base: 0.3s;
	--timing-base: ease;
}

/* ---------------------------------- */
/* Base Layout */
/* ---------------------------------- */

body {
	margin: 0;
	font-family: sans-serif;
	background: var(--off-white);
	color: var(--text-primary);
	font-size: var(--fs-md);
}

.section {
	padding: 2rem 1.5rem;
}

.section:first-of-type {
	padding-top: clamp(6rem, 12vw, 11.25rem);
}

.row {
	max-width: 1200px;
	margin: 0 auto;
}

.col {
	width: 100%;
}

.center-col {
	max-width: 700px;
	margin: 0 auto;
}

.module-button {
	margin-block-start: 2rem;
}

/* ---------------------------------- */
/* 404 Heading Stroke Effect */
/* ---------------------------------- */

.error404 h1 {
	position: relative;
	font-size: var(--fs-hero);
	font-style: italic;
	margin: 0 0 1.5rem;
}

.error404 h1::before {
	content: attr(data-text);
	position: absolute;
	left: -0.06em;
	top: -0.06em;
	color: transparent;
	-webkit-text-stroke: 0.02em var(--faded-black);
	text-stroke: 0.02em var(--faded-black);
}

/* ---------------------------------- */
/* Button System (Converted from SCSS) */
/* ---------------------------------- */

/* Base fallback button tokens */
:root {
	--btn-py: 0.75rem;
	--btn-px: 1.25rem;
	--btn-fs: 0.95rem;
	--btn-fw: 700;
	--btn-ls: 0.02em;
	--btn-bw: 1px;
	--btn-br: 44px;
	--btn-lh: 1.2;

	--duration-normal_base: 0.3s;
	--timing-base: ease;
}

/* Base button */
.btn {
	display: inline-flex;
	gap: var(--spacing-4, 0.5rem);
	align-items: center;

	padding-block: var(--btn-py);
	padding-inline: var(--btn-px);

	font-size: var(--btn-fs);
	font-weight: var(--btn-fw);
	line-height: var(--btn-lh);

	color: var(--btn-fg, currentColor);
	text-decoration: none;
	letter-spacing: var(--btn-ls);

	touch-action: manipulation;
	cursor: pointer;
	user-select: none;

	background: var(--btn-bg, transparent);
	border: var(--btn-bw) solid var(--btn-bc, transparent);
	border-radius: var(--btn-br);

	transition: var(--duration-normal_base) var(--timing-base);
	transition-property: var(--btn-trns-properties, color, background-color, border-color, gap);
}

/* Hover / Focus */
.btn:hover,
.btn:focus-visible {
	gap: var(--spacing-6, 0.75rem);
	color: var(--btn-fg-hover, var(--btn-fg));
	background-color: var(--btn-bg-hover, var(--btn-bg));
	border-color: var(--btn-bc-hover, var(--btn-bc));
}

/* Active */
.btn:active {
	color: var(--btn-fg-active, var(--btn-fg));
	background-color: var(--btn-bg-active, var(--btn-bg));
	border-color: var(--btn-bc-active, var(--btn-bc));
}

/* Disabled */
.btn.disabled,
.btn:disabled {
	pointer-events: none;
	opacity: 0.5;
}

/* ---------------------------------- */
/* Size Modifiers */
/* ---------------------------------- */

.btn-small {
	--btn-py: 0.5rem;
	--btn-px: 0.9rem;
	--btn-fs: 0.8rem;
}

.btn-large {
	--btn-py: 1rem;
	--btn-px: 1.75rem;
	--btn-fs: 1.05rem;
}

.btn-block {
	justify-content: center;
	width: 100%;
}

.btn-square {
	--btn-px: 0;
	align-items: center;
	justify-content: center;
	width: calc(((var(--btn-py) + var(--btn-bw)) * 2) + (var(--btn-lh) * 1em));
	aspect-ratio: 1;
}

.btn-link {
	font-size: inherit;
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* ---------------------------------- */
/* Variants (Based on Your Silent Mixin) */
/* ---------------------------------- */

/* PRIMARY */
.btn-primary {
	--btn-bg: var(--primary);
	--btn-bg-hover: transparent;
	--btn-bg-active: transparent;

	--btn-fg: var(--secondary);
	--btn-fg-hover: var(--primary-foreground-hover);
	--btn-fg-active: var(--primary-foreground-active);

	--btn-bc: var(--secondary-border);
	--btn-bc-hover: var(--secondary-border);
}

/* SECONDARY */
.btn-secondary {
	--btn-bg: var(--secondary);
	--btn-bg-hover: var(--secondary-hover);
	--btn-bg-active: var(--secondary-pressed);

	--btn-fg: var(--secondary-foreground);
	--btn-fg-hover: var(--secondary-foreground-hover);
	--btn-fg-active: var(--secondary-foreground-active);

	--btn-bc: var(--secondary-border);
	--btn-bc-hover: var(--secondary-border-hover);
	--btn-bc-active: var(--secondary-border-hover);
}

/* ---------------------------------- */
/* Contact Section */
/* ---------------------------------- */

.section-contact .row {
	padding: var(--spacing-12);
	background-color: var(--faded-black);
	border-radius: var(--br-md);
	color: var(--off-white);
}

.section-contact h2 {
	position: relative;
	font-size: var(--fs-d1);
	margin-top: 0;
	color: transparent;
	text-transform: uppercase;
	margin-block-end: 1rem;
}

.section-contact h2::before {
	content: attr(data-text);
	position: absolute;
	left: -0.06em;
	top: -0.06em;
	color: transparent;
	-webkit-text-stroke: 0.04em var(--off-white);
	text-stroke: 0.04em var(--off-white);
}

.section-contact .btn-primary {
	--btn-bc: var(--secondary);
	--btn-bg-hover: var(--secondary);
	--btn-fg-hover: var(--primary);
}

/* ---------------------------------- */
/* Button Wrapper */
/* ---------------------------------- */

.button-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

/* ---------------------------------- */
/* Socials */
/* ---------------------------------- */

.social-links {
	display: flex;
	gap: 1rem;
	flex-flow: row wrap;
	flex: 0 0 100%;
}

.social-links svg {
	fill: var(--off-white);
	stroke: var(--off-white);
	font-size: var(--fs-h2);
}

.studio-single-socials {
	display: flex;
	gap: var(--spacing-8);
	flex-flow: row wrap;
	align-items: center;
	margin-top: 1rem;
}

.studio-single-socials p {
	margin-block: 0;
}

.studio-single-socials-icons {
	display: flex;
	gap: var(--spacing-6);
	font-size: 1rem;
}

.studio-single-socials-icons a {
	color: var(--off-white);
	text-decoration: none;
	transition: opacity var(--duration-normal);
}

.studio-single-socials-icons a:hover {
	opacity: 0.7;
}

/* ---------------------------------- */
/* Responsive */
/* ---------------------------------- */

@media (min-width: 768px) {
	.row {
		display: flex;
		gap: 2rem;
	}

	.col-6 {
		width: 50%;
	}

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

@media (min-width: 1024px) {
	.section-contact .row {
		max-width: 75%;
	}
}

@media (max-width: 767px) {
	.col-6 + .col-6 {
		margin-block-start: 2rem;
	}
}