/* Laser Base — design tokens (CSS variables)
   Source: figma-tokens/tokens.json (extracted from Figma homepage). */

:root {
	/* Brand */
	--lb-cream: #FDEBBB;
	--lb-ink: #1A1A1A;
	--lb-white: #FFFFFF;
	--lb-off-white: #F5F5F5;
	--lb-warm-white: #FAF9F7;
	--lb-black: #000000;
	--lb-yellow: #e4d09a;

	/* Neutrals */
	--lb-grey-100: #DDDDDD;
	--lb-grey-300: #8A8A8A;
	--lb-grey-400: #767676;
	--lb-grey-500: #6A6A6A;
	--lb-grey-700: #4A4A4A;
	--lb-grey-800: #2A2A2A;
	--lb-grey-900: #141414;
	--lb-grey-950: #0A0A0A;

	/* Overlays */
	--lb-ink-85: rgba(26, 26, 26, 0.85);
	--lb-ink-65: rgba(26, 26, 26, 0.65);
	--lb-ink-20: rgba(26, 26, 26, 0.20);
	--lb-black-90: rgba(0, 0, 0, 0.90);
	--lb-black-47: rgba(0, 0, 0, 0.47);
	--lb-black-24: rgba(0, 0, 0, 0.24);
	--lb-white-90: rgba(255, 255, 255, 0.90);
	--lb-white-70: rgba(255, 255, 255, 0.70);
	--lb-white-60: rgba(255, 255, 255, 0.60);
	--lb-white-50: rgba(255, 255, 255, 0.50);
	--lb-white-40: rgba(255, 255, 255, 0.40);
	--lb-white-30: rgba(255, 255, 255, 0.30);
	--lb-white-20: rgba(255, 255, 255, 0.20);
	--lb-cream-20: rgba(253, 235, 187, 0.20);
	--lb-cream-30: rgba(253, 235, 187, 0.30);
	--lb-gold: #CBB06B; /* visible gold for borders/outlines on light backgrounds */

	/* Type families */
	--lb-font-display: 'Playfair Display', Georgia, serif;
	--lb-font-heading: 'League Spartan', 'Helvetica Neue', Arial, sans-serif;
	--lb-font-body: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
	--lb-font-accent: 'Cormorant Garamond', Georgia, serif;

	/* Type scale (px) */
	--lb-size-display-xl: 96px;
	--lb-size-display-lg: 72px;
	--lb-size-h1: 60px;
	--lb-size-h2: 56px;
	--lb-size-h3: 48px;
	--lb-size-h4: 40px;
	--lb-size-h5: 30px;
	--lb-size-h6: 24px;
	--lb-size-eyebrow-lg: 20px;
	--lb-size-body-lg: 16px;
	--lb-size-body: 14px;
	--lb-size-body-sm: 13px;
	--lb-size-caption: 12px;
	--lb-size-button: 11px;
	--lb-size-eyebrow-sm: 10px;

	/* Section heading (H2) — single source of truth per Figma (72px desktop, scales down).
	   Every section title points at this, so tuning size is one line. */
	--lb-heading-section: clamp(32px, 5vw, 72px);

	/* Radii */
	--lb-radius-sm: 4px;
	--lb-radius-md: 7px;
	--lb-radius-lg: 20px;
	--lb-radius-xl: 80px;
	--lb-radius-pill: 9999px;

	/* Layout */
	--lb-content-max: 1440px;
	--lb-container-pad-x: 40px;
}

@media (max-width: 880px) {
	:root {
		--lb-container-pad-x: 20px;
	}
}