/* ==========================================================================
   Design Tokens — extracted from Figma (LNL-Website-Launch-2026)
   Breakpoints: desktop > 1024px, tablet <= 1024px, mobile <= 768px
   ========================================================================== */

:root {
	--color-blue-gray: #7398b3;
	--color-dark-gray: #2d292b;
	--color-mid-gray: #d9d9d9;
	--color-light-gray: #f4f4f4;
	--color-white: #ffffff;
	--color-black: #000000;
	--color-off-white: #f7f7f7;
	--color-soft-white: #f9faf9;
	--color-story-bg: #f0f0f0;

	--color-bg-header: var(--color-light-gray);
	--color-bg-hero: var(--color-light-gray);
	--color-bg-story: var(--color-story-bg);
	--color-bg-cocktails: var(--color-soft-white);
	--color-bg-footer: var(--color-light-gray);
	--color-bg-footer-credits: var(--color-blue-gray);

	--font-heading: 'Saira Extra Condensed', sans-serif;
	--font-body: 'Raleway', sans-serif;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--text-display-xl: clamp(4rem, 9.8vw, 12.5rem);   /* 200px max */
	--text-display-lg: clamp(3.2rem, 6.8vw, 8.5625rem); /* 137px max */
	--text-heading-md: clamp(1.75rem, 2.4vw, 2.39875rem); /* 38.38px */
	--text-nav: clamp(1.1rem, 1.45vw, 1.583rem);
	--text-body-lg: clamp(0.95rem, 1.4vw, 1.5rem);    /* 24px max */
	--text-body: clamp(0.9rem, 1.2vw, 1.25rem);       /* 20px max */
	--text-footer: clamp(0.75rem, 1vw, 1.151rem);     /* 18.4px max */
	--text-mobile-display: 3.875rem;                  /* 62px */
	--text-mobile-hero: 5.75rem;                      /* 92px */
	--text-mobile-heading: 2rem;                      /* 32px */
	--text-mobile-body: 0.875rem;                     /* 14px */

	--leading-none: 1;
	--leading-normal: 1.5;
	--leading-tight: 1.3;

	--max-width-desktop: 1658px;
	--max-width-mobile: 375px;
	--container-gutter: clamp(1rem, 3vw, 3rem);
}