/*
 * Westside Design System — tokens.
 * Phase 6 §4. Sourced from the real Westside logo (warm gold + palm green)
 * rather than an invented palette. Bright/warm/spacious, not black-and-gold
 * "luxury" or generic SaaS.
 */
:root {
	/* ---- Brand colour ---- */
	--ws-gold:            #C8862B;
	--ws-gold-dark:       #A66A1E;
	--ws-gold-light:      #E7B36B;
	--ws-palm:            #2F6B4F;
	--ws-palm-dark:       #234E3A;
	--ws-palm-light:      #DCEBE2;

	/* ---- Neutrals ---- */
	--ws-ink:             #2A2B26;
	--ws-ink-soft:        #5B5C54;
	--ws-cream:           #FDF9F2;
	--ws-sand:            #F3E9D6;
	--ws-sand-dark:       #E7D8B8;
	--ws-white:           #FFFFFF;
	--ws-line:            #E7E0D2;

	/* ---- Status ---- */
	--ws-success:         #2F6B4F;
	--ws-error:           #B3432B;
	--ws-error-bg:        #FBEAE5;

	/* ---- Typography ---- */
	--ws-font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
	--ws-font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--ws-text-xs:         0.8125rem;
	--ws-text-sm:         0.9375rem;
	--ws-text-base:       1rem;
	--ws-text-lg:         1.125rem;
	--ws-text-xl:         1.375rem;
	--ws-text-2xl:        1.75rem;
	--ws-text-3xl:        2.25rem;
	--ws-text-4xl:        2.875rem;
	--ws-text-5xl:        3.5rem;

	--ws-leading-tight:   1.15;
	--ws-leading-normal:  1.55;

	/* ---- Spacing scale (4px base) ---- */
	--ws-space-1:  0.25rem;
	--ws-space-2:  0.5rem;
	--ws-space-3:  0.75rem;
	--ws-space-4:  1rem;
	--ws-space-5:  1.5rem;
	--ws-space-6:  2rem;
	--ws-space-7:  2.5rem;
	--ws-space-8:  3rem;
	--ws-space-9:  4rem;
	--ws-space-10: 5.5rem;

	/* ---- Layout ---- */
	--ws-container-max:   1240px;
	--ws-container-pad:   1.25rem;
	--ws-radius-sm:       8px;
	--ws-radius-md:       14px;
	--ws-radius-lg:       22px;
	--ws-radius-pill:     999px;

	/* ---- Elevation ---- */
	--ws-shadow-sm:  0 2px 8px rgba(42, 43, 38, 0.08);
	--ws-shadow-md:  0 8px 24px rgba(42, 43, 38, 0.12);
	--ws-shadow-lg:  0 20px 48px rgba(42, 43, 38, 0.16);

	/* ---- Overlays ---- */
	--ws-overlay-scrim:   linear-gradient(180deg, rgba(20,20,16,0.15) 0%, rgba(20,20,16,0.55) 100%);
	--ws-overlay-backdrop: rgba(20, 20, 16, 0.45);

	/* ---- Motion ---- */
	--ws-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ws-duration-fast: 150ms;
	--ws-duration-base: 250ms;

	/* ---- Header height (used for sticky offsets) ---- */
	--ws-header-h: 84px;
	--ws-header-h-compact: 64px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--ws-duration-fast: 0ms;
		--ws-duration-base: 0ms;
	}
}