/* ====================================================================
   BALLO STUDIO — Colors & Type
   "We bind materials. We unleash emotions."
   ==================================================================== */

/* -------- FONT FACES -------- */

@font-face {
	font-family: "Paris 2024";
	src:
		url("fonts/Paris2024-Variable.ttf") format("truetype-variations"),
		url("fonts/Paris2024-Variable.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Helony";
	src: url("fonts/Helony.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-UltraLight.otf") format("opentype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Regular-Italic.otf") format("opentype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-ExtraBold.otf") format("opentype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Acid Grotesk";
	src: url("fonts/AcidGrotesk-Black.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* -------- ROOT TOKENS -------- */

:root {
	/* -- Color (canonical, 4 colors only) -- */
	--ballo-black: #1e1e1e; /* texto principal & bloques de contraste */
	--ballo-white: #f7f7f7; /* off-white, fondo dominante */
	--ballo-blue: #3067d4; /* Azul Mineral — color de firma */
	--ballo-ocre: #9a6d2c; /* Arcilla Ocre — tercer color cálido */

	/* Transparencias del negro (NO grises sólidos) */
	--ballo-black-90: rgba(30, 30, 30, 0.9);
	--ballo-black-70: rgba(30, 30, 30, 0.7);
	--ballo-black-50: rgba(30, 30, 30, 0.5);
	--ballo-black-30: rgba(30, 30, 30, 0.3);
	--ballo-black-15: rgba(30, 30, 30, 0.15);
	--ballo-black-08: rgba(30, 30, 30, 0.08);

	/* Semantic */
	--bg: var(--ballo-white);
	--bg-inverse: var(--ballo-black);
	--fg: var(--ballo-black);
	--fg-muted: var(--ballo-black-70);
	--fg-subtle: var(--ballo-black-50);
	--fg-inverse: var(--ballo-white);
	--accent: var(--ballo-blue);
	--accent-warm: var(--ballo-ocre);
	--rule: var(--ballo-black);
	--rule-soft: var(--ballo-black-15);

	/* -- Typography families -- */
	--font-display:
		"Paris 2024", "Migra", "Boldonse", "Recoleta Alt", Georgia, serif;
	--font-body:
		"Acid Grotesk", "Inter", "Söhne", "Aktiv Grotesk", system-ui,
		-apple-system, sans-serif;
	--font-mono: "Helony", "General Sans", ui-monospace, monospace;

	/* -- Type scale (px) — fluid via clamp for hero/h1 -- */
	--fz-hero: clamp(72px, 11vw, 140px);
	--fz-h1: clamp(44px, 5.6vw, 64px);
	--fz-h2: clamp(24px, 2.4vw, 32px);
	--fz-h3: clamp(20px, 1.8vw, 24px);
	--fz-body: 17px;
	--fz-body-sm: 15px;
	--fz-label: 12px;
	--fz-meta: 11px;

	/* Section numbers (the giant 01., 02. in Azul Mineral) */
	--fz-section-num: clamp(180px, 22vw, 320px);

	/* Line heights */
	--lh-tight: 0.95;
	--lh-snug: 1.1;
	--lh-normal: 1.5;
	--lh-loose: 1.65;

	/* Letter spacing */
	--ls-label: 0.14em; /* +140 tracking, uppercase labels */
	--ls-meta: 0.18em;
	--ls-tight: -0.02em;

	/* -- Spacing scale -- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 192px;

	/* -- Radii -- */
	/* NEVER 8–12px SaaS radii. Either none (hard blocks) or LARGE. */
	--radius-none: 0;
	--radius-pill: 9999px;
	--radius-blob: 48px;
	--radius-mega: 96px;

	/* -- Motion -- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in: cubic-bezier(0.55, 0, 0.66, 0.18);
	--ease-knot: cubic-bezier(0.65, 0.05, 0.36, 1);
	--dur-fast: 180ms;
	--dur-base: 320ms;
	--dur-slow: 600ms;

	/* -- Layout -- */
	--page-x: clamp(24px, 5vw, 80px);
	--sidebar-w: 56px; /* rotated metadata sidebars */
	--max-w: 1440px;
}

/* -------- BASE -------- */

html,
body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: var(--fz-body);
	line-height: var(--lh-normal);
	font-feature-settings: "ss01", "ss02", "kern";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--ballo-blue);
	color: var(--ballo-white);
}

/* -------- SEMANTIC TYPE -------- */

.t-hero {
	font-family: var(--font-display);
	font-weight: 400; /* Paris 2024 Regular — don't go Black */
	font-size: var(--fz-hero);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
}

.t-h1 {
	font-family: var(--font-display);
	font-weight: 600; /* Semibold */
	font-size: var(--fz-h1);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
}

.t-h2 {
	/* destacados, section headers */
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fz-h2);
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.t-h2--helony {
	/* alt H2: Helony display */
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: var(--fz-h2);
	line-height: 1.15;
	text-transform: none;
}

.t-h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fz-h3);
	line-height: 1.25;
}

.t-body {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fz-body);
	line-height: var(--lh-normal);
	text-wrap: pretty;
}

.t-body-sm {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--fz-body-sm);
	line-height: var(--lh-normal);
}

.t-label {
	/* PALETA DE COLOR, SECTION TAGS */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fz-label);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	line-height: 1;
}

.t-meta {
	/* sidebar metadata, rotated */
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fz-meta);
	text-transform: uppercase;
	letter-spacing: var(--ls-meta);
}

.t-section-num {
	/* the giant 01. */
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fz-section-num);
	line-height: 0.85;
	color: var(--ballo-blue);
	letter-spacing: -0.04em;
}
.t-section-num .dot {
	color: var(--ballo-blue);
}

/* The signature italic-cursive treatment — Paris 2024 trades */
.t-quote {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: var(--fz-h1);
	line-height: var(--lh-snug);
}

/* Helony for quoted destacados */
.t-helony {
	font-family: var(--font-mono);
	font-weight: 400;
}

/* -------- HEADING DEFAULTS -------- */

h1 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fz-h1);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	margin: 0;
}
h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: var(--fz-h2);
	text-transform: uppercase;
	line-height: 1.15;
	margin: 0;
}
h3 {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fz-h3);
	line-height: 1.25;
	margin: 0;
}
p {
	margin: 0 0 1em 0;
}

/* -------- HORIZONTAL RULE -------- */
hr.ballo-rule {
	border: none;
	border-top: 1px solid var(--rule);
	margin: var(--space-7) 0;
}