/*
 * Shubh Laabh Arts — Global Design Tokens
 *
 * The ONE central source for the brand's color and typography system,
 * loaded globally (functions.php, before every other theme stylesheet) so
 * it's available to the header, the footer, and any future Elementor
 * section alike — colors and type are defined here once, never scattered
 * as one-off hex codes or font-family strings across individual files.
 *
 * Every color below is an ALIAS onto theme.json's own color.palette
 * (wp-content/themes/shubh-laabh-arts/theme.json) — the actual hex values
 * live in exactly one place. theme.json's palette is also what populates
 * the block editor's (and, once installed, Elementor's) color picker, so
 * these names and that picker always stay in sync automatically. Do not
 * hardcode a hex color anywhere else in this theme — add a token here (or
 * to theme.json first, if it's a genuinely new brand color) and reference
 * it instead.
 */

:root {
	/* ---- Color — semantic names, theme.json is still the source of truth ---- */
	--sla-peacock-navy: var( --wp--preset--color--peacock-navy );
	--sla-deep-navy: var( --wp--preset--color--deep-navy );
	--sla-champagne-gold: var( --wp--preset--color--champagne-gold );
	--sla-light-gold: var( --wp--preset--color--light-gold );
	--sla-ivory: var( --wp--preset--color--ivory );
	--sla-warm-cream: var( --wp--preset--color--cream );
	--sla-muted-blue: var( --wp--preset--color--muted );
	--sla-gold-soft: var( --wp--preset--color--gold-soft );
	--sla-deep-teal: var( --wp--preset--color--teal );
	--sla-lotus-pink: var( --wp--preset--color--lotus-pink );
	--sla-emerald: var( --wp--preset--color--emerald );
	--sla-ivory-dark: var( --wp--preset--color--ivory-dark );
	--sla-white: var( --wp--preset--color--white );
	--sla-wine: var( --wp--preset--color--wine );
	--sla-antique-gold: var( --wp--preset--color--antique-gold );

	/* ---- Typography — the two brand families, aliased the same way ---- */
	--sla-font-display: var( --wp--preset--font-family--display );
	--sla-font-body: var( --wp--preset--font-family--body );

	/* ---- Typography — semantic scale ----
	 * Every size is a fluid clamp() (no fixed-breakpoint media queries
	 * needed for basic scaling); use the .sla-* classes below directly, or
	 * the --sla-text-* custom properties if a specific element needs the
	 * size without the rest of the class's declarations (e.g. weight). */
	--sla-text-display-xl: clamp( 3rem, 2.2rem + 4vw, 5.5rem );
	--sla-text-display-lg: clamp( 2.5rem, 2rem + 2.5vw, 4rem );
	--sla-text-h1: clamp( 2.1rem, 1.8rem + 1.5vw, 3rem );
	--sla-text-h2: clamp( 1.65rem, 1.45rem + 1vw, 2.25rem );
	--sla-text-h3: clamp( 1.3rem, 1.15rem + 0.6vw, 1.625rem );
	--sla-text-body-lg: 1.125rem;
	--sla-text-body: 1rem;
	--sla-text-small: 0.875rem;
	--sla-text-nav: 1rem;
	--sla-text-button: 0.875rem;
	--sla-text-eyebrow: 0.8125rem;
}

/* ---- Typography — semantic utility classes ----
 * Available to any section of the site, including future Elementor
 * content, via <span class="sla-h2">, etc. Deliberately unopinionated
 * about color/margin beyond what's listed — those still come from
 * context (theme.json's heading/link element styles, or a section's own
 * layout), so applying one of these never fights a surrounding block's
 * spacing. */
.sla-display-xl {
	font-family: var( --sla-font-display );
	font-size: var( --sla-text-display-xl );
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.sla-display-lg {
	font-family: var( --sla-font-display );
	font-size: var( --sla-text-display-lg );
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.sla-h1 {
	font-family: var( --sla-font-display );
	font-size: var( --sla-text-h1 );
	font-weight: 600;
	line-height: 1.1;
}

.sla-h2 {
	font-family: var( --sla-font-display );
	font-size: var( --sla-text-h2 );
	font-weight: 600;
	line-height: 1.15;
}

.sla-h3 {
	font-family: var( --sla-font-display );
	font-size: var( --sla-text-h3 );
	font-weight: 600;
	line-height: 1.2;
}

.sla-body-lg {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-body-lg );
	font-weight: 500;
	line-height: 1.65;
}

.sla-body {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-body );
	font-weight: 500;
	line-height: 1.6;
}

.sla-small {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-small );
	font-weight: 500;
	line-height: 1.5;
}

.sla-nav-text {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-nav );
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sla-button-text {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-button );
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sla-eyebrow {
	font-family: var( --sla-font-body );
	font-size: var( --sla-text-eyebrow );
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --sla-champagne-gold );
}