/* ==========================================================================
   Salisa Resort — Design Tokens
   "Natural/Local" direction — see vault/wiki/concepts/salisa-design-system.md
   ========================================================================== */

:root {
	/* ---- Color primitives ---- */
	--color-sand-50:  #FBFAF6;
	--color-sand-100: #F5F1E8;
	--color-sand-200: #E8E1D4;
	--color-sand-300: #D8CFBF;

	--color-palm-500: #617668;
	--color-palm-700: #3F5A4D;
	--color-palm-800: #30473D;
	--color-palm-900: #263D34;

	--color-sea-400: #82A5A4;
	--color-sea-500: #668D8D;
	--color-sea-700: #315E60;

	--color-earth-500: #8A7259;
	--color-earth-600: #705B46;

	--color-charcoal-800: #26302C;
	--color-charcoal-900: #1C2522;

	--color-white: #FFFFFF;
	--color-black: #000000;

	/* ---- Color semantic (components use these, not primitives) ---- */
	--color-bg-primary:        var(--color-sand-50);
	--color-bg-secondary:      var(--color-sand-100);
	--color-bg-tertiary:       var(--color-sand-200);
	--color-bg-dark:           var(--color-palm-900);
	--color-bg-dark-secondary: var(--color-palm-800);

	--color-text-primary:   var(--color-charcoal-800);
	--color-text-secondary: #52635D;
	--color-text-muted:     #71807A;
	--color-text-inverse:   var(--color-white);

	--color-brand-primary: var(--color-palm-700);
	--color-brand-dark:    var(--color-palm-900);

	--color-accent:       var(--color-sea-700);
	--color-accent-hover: var(--color-sea-500);

	--color-border:      var(--color-sand-300);
	--color-border-dark: rgba(255, 255, 255, 0.25);

	--color-link:       var(--color-palm-700);
	--color-link-hover: var(--color-sea-700);

	/* ---- Typography ---- */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;

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

	--line-height-display: 0.98;
	--line-height-heading: 1.12;
	--line-height-body:    1.6;
	--line-height-label:   1.3;

	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-label:  0.14em;
	--tracking-button: 0.08em;

	/* Type scale — desktop values; mobile overrides in @media below */
	--text-display-xl: 72px;
	--text-display-lg: 56px;
	--text-display-md: 44px;
	--text-heading-xl: 48px;
	--text-heading-lg: 38px;
	--text-heading-md: 30px;
	--text-heading-sm: 24px;
	--text-body-lg: 19px;
	--text-body-md: 16px;
	--text-body-sm: 14px;
	--text-label: 12px;
	--text-caption: 11px;

	/* ---- Spacing (8px scale) ---- */
	--space-1: 4px;   --space-2: 8px;    --space-3: 12px;  --space-4: 16px;
	--space-5: 24px;  --space-6: 32px;   --space-7: 40px;  --space-8: 48px;
	--space-9: 64px;  --space-10: 80px;  --space-11: 96px; --space-12: 120px;
	--space-13: 160px;

	/* ---- Layout ---- */
	--container-max:              1280px;
	--container-padding-desktop:  32px;
	--container-padding-tablet:   28px;
	--container-padding-mobile:   20px;
	--grid-columns-desktop: 12;
	--grid-columns-tablet:  8;
	--grid-columns-mobile:  4;
	--grid-gap: 24px;

	/* ---- Borders, radius, shadows ---- */
	--radius-none: 0px;
	--radius-sm:   2px;
	--radius-md:   4px;
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--color-border);
	--shadow-none:    none;
	--shadow-subtle:  0 4px 20px rgba(30, 45, 40, 0.08);

	/* ---- Buttons ---- */
	--button-height:          48px;
	--button-padding-x:       24px;
	--button-font-size:       12px;
	--button-font-weight:     600;
	--button-letter-spacing:  0.08em;

	/* ---- Motion ---- */
	--duration-fast:   180ms;
	--duration-normal: 300ms;
	--duration-slow:   600ms;
	--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mobile type scale.
   Only display/heading/body-lg tiers rescale here — body-sm, label, caption,
   and button-font-size stay fixed at every viewport since they're already
   small (11-14px) and don't need to shrink further on mobile. */
@media (max-width: 767px) {
	:root {
		--text-display-xl: 46px;
		--text-display-lg: 40px;
		--text-display-md: 34px;
		--text-heading-xl: 36px;
		--text-heading-lg: 30px;
		--text-heading-md: 26px;
		--text-heading-sm: 22px;
		--text-body-lg: 18px;
		--container-padding-mobile: 20px;
	}
}

.container {
	width: min(calc(100% - 64px), var(--container-max));
	margin-inline: auto;
}
@media (max-width: 767px) {
	.container { width: calc(100% - 40px); }
}