/**
 * Design tokens from Figma (Lucky Heaven)
 * Use these in components; no hardcoded colors/shadows in section CSS.
 *
 * @package Lucky_Heaven
 * @since 1.0.0
 */

:root {
	/* ---- Breakpoints (Tailwind-aligned; reference for JS / docs) ---- */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-xxl: 1536px;

	/* ---- Colors: backgrounds ---- */
	--lh-bg-hero: #480016;
	--lh-bg-hero-mid: #332330;
	--lh-bg-header: linear-gradient(135deg, #160003 0%, #4d0017 100%);
	--lh-bg-footer: linear-gradient(0deg, #350006 0%, rgba(56, 0, 8, 0) 100%);
	--lh-bg-blur-orb: #a20026;
	--lh-bg-section-overlay: rgba(0, 0, 0, 0.14);
	--lh-bg-card-overlay: rgba(0, 0, 0, 0.2);
	--lh-bg-card-overlay-tint: rgba(80.91, 0, 0, 0.2);
	--lh-bg-tooltip: rgba(76.01, 3.65, 3.65, 0.59);
	--lh-bg-tooltip-header: rgba(0, 0, 0, 0.3);
	--lh-bg-contact-card: linear-gradient(270deg, #360005 0%, #560009 11%, #ff4f50 31%, #ff4f50 68%, #560009 88%, #360005 100%);
	--lh-bg-contact-name-bar: linear-gradient(90deg, #3b0105 0%, #ec3941 50%, #3b0105 100%);
	--lh-bg-button: linear-gradient(51deg, #651120 0%, #e0152e 100%);
	--lh-bg-button-ghost: linear-gradient(51deg, rgba(101, 17, 32, 0.7) 0%, rgba(224, 21, 46, 0.7) 100%);

	/* ---- Colors: text ---- */
	--lh-text-primary: #ffffff;
	--lh-text-muted: rgba(255, 255, 255, 0.22);
	--lh-text-section-title: #ff7e8f;
	--lh-text-tooltip-title: #848484;
	--lh-text-tooltip-body: #ffffff;

	/* ---- Colors: borders & UI ---- */
	--lh-border-light: 1px solid rgba(255, 255, 255, 0.27);
	--lh-border-white: 1px solid white;
	--lh-border-button-ghost: 1px solid rgba(255, 255, 255, 0.18);

	/* ---- Shadows ---- */
	--lh-shadow-button: 0 0 40.2px 3px #d1142c;
	--lh-shadow-card: 0 0 40.2px 3px #d1142c;
	--lh-shadow-contact-inset: 0 0 57.2px rgba(0, 0, 0, 0.59) inset;
	--lh-shadow-partner-active: 0 4px 15.4px rgba(255, 46.59, 46.59, 0.25), 0 0 27.3px rgba(255, 0, 0, 0.25) inset;

	/* ---- Typography: families ---- */
	--lh-font-gilroy: "Gilroy", -apple-system, BlinkMacSystemFont, sans-serif;
	--lh-font-inter: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

	/* ---- Typography: hero ---- */
	--lh-hero-label-size: 70px;
	--lh-hero-label-weight: 500;
	--lh-hero-label-height: 70.05px;
	--lh-hero-title-size: 89px;
	--lh-hero-title-weight: 700;
	--lh-hero-title-height: 107.78px;
	--lh-hero-desc-size: 24px;
	--lh-hero-desc-weight: 500;
	--lh-hero-desc-height: 24.02px;

	/* ---- Typography: section titles ---- */
	--lh-section-title-size: 70px;
	--lh-section-title-weight: 700;
	--lh-section-title-height: 70.05px;

	/* ---- Typography: UI ---- */
	--lh-nav-size: 20px;
	--lh-nav-weight: 700;
	--lh-button-size: 24px;
	--lh-button-weight: 700;
	--lh-button-height: 24.02px;
	--lh-footer-size: 13px;
	--lh-footer-weight: 700;

	/* ---- Typography: about / partners ---- */
	--lh-about-heading-size: 43px;
	--lh-about-heading-weight: 700;
	--lh-partner-cell-text-size: 41px;
	--lh-partner-cell-text-weight: 700;
	--lh-tooltip-title-size: 26px;
	--lh-tooltip-subtitle-size: 16px;
	--lh-tooltip-subtitle-weight: 600;
	--lh-tooltip-body-size: 7px;
	--lh-tooltip-body-weight: 600;
	--lh-tooltip-caption-weight: 300;
	--lh-tooltip-caption-style: italic;

	/* ---- Typography: contact cards ---- */
	--lh-contact-name-size: 24px;
	--lh-contact-name-weight: 700;
	--lh-contact-title-style: italic;
	--lh-contact-title-weight: 400;

	/* ---- Spacing & layout ---- */
	--lh-radius-button: 11px;
	--lh-radius-card: 11px;
	--lh-radius-partner-cell: 12px;
	--lh-radius-tooltip: 17px;
	--lh-radius-news-card: 27px;
	--lh-radius-contact-card: 19px;
	--lh-blur-orb: 268.7px;
	--lh-blur-accent: 15px;

	/* ---- Header ---- */
	--lh-header-height: 122px;
	--lh-header-height-desktop: 168px;
	--lh-header-height-mobile: 88px;
	--lh-logo-width: 180px;
	--lh-logo-height: 80px;
	--lh-logo-width-mobile: 103px;
	--lh-logo-height-mobile: 46px;
	--lh-nav-item-width: 90px;
	--lh-nav-item-height: 35px;
	--lh-nav-item-gap: 13px;
	/* Hamburger (mobile): 46×3px lines, 9px gap */
	--lh-hamburger-width: 46px;
	--lh-hamburger-line-height: 3px;
	--lh-hamburger-gap: 9px;

	/* ---- Component sizes (reference; use in layout, not fixed) ---- */
	--lh-hero-button-w: 236px;
	--lh-hero-button-h: 65px;
	--lh-game-card-size: 309px;
	--lh-partner-cell-w: 197px;
	--lh-partner-cell-h: 130px;
	--lh-contact-card-w: 335px;
	--lh-contact-card-h: 465px;
	/* Mobile contact card overlay (Figma mobile frame 234.87×326.16) */
	--lh-contact-m-stage-h: 326.16px;
	--lh-contact-m-photo-top: 21px;
	--lh-contact-m-photo-slot-h: 232px;
	--lh-contact-m-meta-top: 209.63px;
	--lh-contact-m-meta-h: 56.09px;
	--lh-contact-m-cta-top: 259.4px;
}