/* =========================================================================
   Bocavaldivia Academy - Design System v1.0
   Tokens, typography refinements, buttons, and Tutor LMS theming.
   Fonts + base palette/typography are declared in theme.json.
   ========================================================================= */

:root {
	/* --- Brand palette --- */
	--bva-dark: #181818;
	--bva-gold: #B08543;
	--bva-white: #FFFFFF;
	--bva-fog: #B8B8B8;

	/* --- Spacing scale --- */
	--bva-space-4: 0.25rem;
	--bva-space-8: 0.5rem;
	--bva-space-12: 0.75rem;
	--bva-space-16: 1rem;
	--bva-space-24: 1.5rem;
	--bva-space-32: 2rem;
	--bva-space-48: 3rem;
	--bva-space-64: 4rem;
	--bva-space-80: 5rem;

	/* --- Radius scale --- */
	--bva-radius-sm: 4px;
	--bva-radius-md: 8px;
	--bva-radius-lg: 12px;
	--bva-radius-pill: 999px;

	/* --- Type --- */
	--bva-font-display: "GFS Didot", Didot, "Times New Roman", serif;
	--bva-font-body: Gotham, "Helvetica Neue", Arial, sans-serif;
	--bva-font-ui: Inter, "Helvetica Neue", Arial, sans-serif;

	/* --- Retheme Tutor LMS to the brand --- */
	--tutor-color-primary: var(--bva-gold);
	--tutor-color-primary-hover: #c79a52;
	--tutor-color-primary-active: #9a7236;
	--tutor-color-primary-rgb: 176, 133, 67;
	--tutor-fontfamily-body: var(--bva-font-body);
	--tutor-fontfamily-heading: var(--bva-font-display);
}

/* -------------------------------------------------------------------------
   Typography refinements (line-heights + secondary text the design specifies)
   ------------------------------------------------------------------------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, .bva-display { line-height: 1.1; }

.bva-body-large { font-size: 1.125rem; line-height: 1.5; font-weight: 300; }
.bva-text-secondary { color: var(--bva-fog); }

/* Label / Caps - Gotham light, uppercase, 12% tracking */
.bva-label-caps {
	font-family: var(--bva-font-body);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.875rem;
	line-height: 1.2;
}

.bva-caption { font-size: 0.75rem; color: var(--bva-fog); }

/* -------------------------------------------------------------------------
   Buttons - design system spec
   Primary: white fill, #181818 text, pill radius, Inter Medium, 56px (40 SM)
   Ghost:   transparent, 1px white border, square (0 radius)
   ------------------------------------------------------------------------- */
.bva-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bva-font-ui);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1;
	padding: 0 2rem;
	height: 56px;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.bva-btn--primary {
	background-color: var(--bva-white);
	color: var(--bva-dark);
	border-radius: var(--bva-radius-pill);
}
.bva-btn--primary:hover,
.bva-btn--primary:focus-visible {
	background-color: var(--bva-gold);
	color: var(--bva-dark);
}

.bva-btn--sm { height: 40px; padding: 0 1.5rem; font-size: 0.875rem; }

.bva-btn--ghost {
	background-color: transparent;
	color: var(--bva-white);
	border: 1px solid var(--bva-white);
	border-radius: 0;
}
.bva-btn--ghost:hover,
.bva-btn--ghost:focus-visible {
	background-color: var(--bva-white);
	color: var(--bva-dark);
}

/* Map the WordPress core Button block to the brand:
   default (fill) -> primary pill, outline -> ghost square. */
.wp-block-button__link {
	font-family: var(--bva-font-ui);
	font-weight: 500;
	background-color: var(--bva-white);
	color: var(--bva-dark);
	border-radius: var(--bva-radius-pill);
	padding: 1rem 2rem;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--bva-gold);
	color: var(--bva-dark);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--bva-white);
	border: 1px solid var(--bva-white);
	border-radius: 0;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--bva-white);
	color: var(--bva-dark);
}