/* -----------------------------------------------------------------------------
   Whitsunday Escape — Design tokens
   Source: Figma "Whitsunday-website" › Components (mlI6JU3EiSENrgWYdzq7eS)
   Extracted via Figma MCP get_variable_defs on node 3058:4698.
   Do not hand-edit values here; re-pull from Figma when the library changes.
-------------------------------------------------------------------------------- */

:root {
	/* --- Palette: brand ------------------------------------------------------ */
	--wse-brand-25: #f4fcfe;
	--wse-brand-50: #eaf9fd;
	--wse-brand-200: #bfedf9;
	--wse-brand-300: #9fe4f6;
	--wse-brand-400: #4acded;
	--wse-brand-500: #2ac4ea;
	--wse-brand-600: #24a7c7;
	--wse-brand-700: #1b7f98;

	/* Tab accent (Untitled UI blue, distinct from brand cyan) */
	--wse-tab-border: #0082c3;
	--wse-tab-text: #00689c;

	/* --- Palette: secondary -------------------------------------------------- */
	--wse-navy: #032659;

	/* --- Palette: gray ------------------------------------------------------- */
	--wse-white: #ffffff;
	--wse-gray-50: #fafafa;
	--wse-gray-100: #f5f5f5;
	--wse-gray-200: #e9eaeb;
	--wse-gray-300: #d5d7da;
	--wse-gray-400: #a4a7ae;
	--wse-gray-500: #717680;
	--wse-gray-600: #535862;
	--wse-gray-700: #414651;
	--wse-gray-900: #181d27;

	/* --- Palette: gray blue -------------------------------------------------- */
	--wse-gray-blue-50: #f8f9fc;
	--wse-gray-blue-700: #363f72;

	/* --- Palette: accents ---------------------------------------------------- */
	--wse-success-50: #ecfdf3;
	--wse-success-200: #abefc6;
	--wse-success-700: #067647;
	--wse-warning-400: #fdb022;
	--wse-fuchsia-100: #fbe8ff;

	/* --- Typography ---------------------------------------------------------- */
	--wse-font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;

	--wse-weight-regular: 400;
	--wse-weight-medium: 500;
	--wse-weight-semibold: 600;

	--wse-display-2xl-size: 4.5rem;   /* 72px */
	--wse-display-2xl-line: 5.625rem; /* 90px */

	/* Display xl — hero only. Figma confirms tracking -2 means -2%: 60px → -1.2px. */
	--wse-display-xl-size: 3.75rem;   /* 60px */
	--wse-display-xl-line: 4.5rem;    /* 72px */

	/* Display scale — negative tracking per Untitled UI display styles */
	--wse-display-lg-size: 3rem;      /* 48px */
	--wse-display-lg-line: 3.75rem;   /* 60px */
	--wse-display-md-size: 2.25rem;   /* 36px */
	--wse-display-md-line: 2.75rem;   /* 44px */
	--wse-display-sm-size: 1.875rem;  /* 30px */
	--wse-display-sm-line: 2.375rem;  /* 38px */
	--wse-display-xs-size: 1.5rem;    /* 24px */
	--wse-display-xs-line: 2rem;      /* 32px */
	--wse-display-tracking: -0.02em;

	/* Text scale */
	--wse-text-xl-size: 1.25rem;      /* 20px */
	--wse-text-xl-line: 1.875rem;     /* 30px */
	--wse-text-lg-size: 1.125rem;     /* 18px */
	--wse-text-lg-line: 1.75rem;      /* 28px */
	--wse-text-md-size: 1rem;         /* 16px */
	--wse-text-md-line: 1.5rem;       /* 24px */
	--wse-text-sm-size: 0.875rem;     /* 14px */
	--wse-text-sm-line: 1.25rem;      /* 20px */
	--wse-text-xs-size: 0.75rem;      /* 12px */
	--wse-text-xs-line: 1.125rem;     /* 18px */

	/* --- Radii --------------------------------------------------------------- */
	--wse-radius-sm: 6px;
	--wse-radius-img: 12px;
	--wse-radius-md: 8px;
	--wse-radius-full: 9999px;
	--wse-radius-lg: 16px;
	--wse-radius-xl: 20px;
	--wse-radius-2xl: 24px;
	--wse-radius-pill: 100px;

	/* --- Elevation ----------------------------------------------------------- */
	--wse-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
	/*
	 * Verified against the rendered Figma component: a bordered button shows a
	 * single 1px border and this soft inner bottom line. The 1px dark ring that
	 * also appears in the Figma inspector sits *under* the border and is not
	 * visible, so stacking both doubles the edge.
	 */
	--wse-inset-bottom: inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
	--wse-shadow-lg:
		0 2px 2px -1px rgba(10, 13, 18, 0.04),
		0 4px 6px -2px rgba(10, 13, 18, 0.03),
		0 12px 16px -4px rgba(10, 13, 18, 0.08);
	--wse-shadow-xl:
		0 3px 3px -1.5px rgba(10, 13, 18, 0.04),
		0 8px 8px -4px rgba(10, 13, 18, 0.03),
		0 20px 24px -4px rgba(10, 13, 18, 0.08);

	--wse-backdrop-blur-sm: 8px;
	--wse-backdrop-blur-lg: 24px;

	/* Award pill gradient — Figma: 8294:4373 */
	--wse-gradient-gold: linear-gradient(
		104.52deg,
		#d8a05c 0%,
		#ecb26c 32.212%,
		#ecb26c 41.827%,
		#d99b50 54.164%,
		#dc8c2e 100%
	);

	/* Backdrop behind the page shell on displays wider than the shell itself. */
	--wse-page-backdrop: #efefef;
	--wse-page-max: 1920px;

	/* --- Layout -------------------------------------------------------------- */
	/* Figma frames are 1440 wide, but every Container inside is max-w-[1280px]
	   with 32px gutters, i.e. 1216px of content. */
	--wse-container-max: 1280px;
	--wse-gutter-desktop: 32px;
	--wse-gutter-mobile: 16px;
}