/* ==========================================================================
   Safari Premium — Design Tokens
   Single source of truth: colors, typography, spacing, radii, shadows, breakpoints.
   Extracted from the Claude Design handoff (KaribuZanzibar_Website-handoff).
   ========================================================================== */

:root {
	/* --- Core spice palette --------------------------------------------- */
	--sp-color-brown:        #5C2E0A;
	--sp-color-burnt-orange: #C2410C;
	--sp-color-sunset:       #EA580C;
	--sp-color-amber:        #F59E0B;
	--sp-color-soft-sunset:  #FCD34D;

	/* --- Neutrals ------------------------------------------------------- */
	--sp-color-cream:       #FEF6E9;
	--sp-color-ivory:       #FAEFD9;
	--sp-color-off-white:   #FFFBF4;
	--sp-color-muted-brown: #8B5A2B;
	--sp-color-charcoal:    #1C1410;

	/* --- Borders, gradients, shadows ------------------------------------ */
	--sp-color-card-border: #F2E4C4;
	--sp-color-text-muted-on-dark: #D6B893;
	--sp-color-text-faint-on-dark: #A88757;
	--sp-color-text-soft-on-dark:  #E6CFA8;
	--sp-color-text-cream-on-dark: #F5E4C7;
	--sp-color-placeholder-text:   #8C6A3E; /* WCAG AA ~4.8:1 on cream (was #B89470 = 2.7:1) */

	--sp-shadow-card: 0 10px 30px -12px rgba(92,46,10,0.14), 0 2px 6px -2px rgba(92,46,10,0.08);
	--sp-shadow-card-strong: 0 24px 60px -20px rgba(92,46,10,0.35);
	--sp-shadow-btn-primary: 0 4px 14px -4px rgba(194,65,12,0.35);
	--sp-shadow-sticky: 0 -4px 20px -8px rgba(92,46,10,0.14);
	--sp-shadow-header: 0 2px 20px -8px rgba(92,46,10,0.12);

	--sp-gradient-hero-overlay: linear-gradient(180deg, rgba(28,20,16,0.50) 0%, rgba(28,20,16,0.34) 45%, rgba(92,46,10,0.70) 100%);
	--sp-gradient-page-hero:    linear-gradient(180deg, rgba(92,46,10,0.15) 0%, rgba(92,46,10,0.65) 100%);
	--sp-gradient-sunset:       linear-gradient(135deg, #F59E0B 0%, #EA580C 55%, #C2410C 100%);

	/* --- Typography ----------------------------------------------------- */
	--sp-font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	--sp-font-sans:  'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sp-font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

	--sp-text-xs:   12px;
	--sp-text-sm:   13px;
	--sp-text-base: 14px;
	--sp-text-md:   15px;
	--sp-text-lg:   16px;
	--sp-text-xl:   18px;
	--sp-text-2xl:  22px;
	--sp-text-3xl:  28px;
	--sp-text-4xl:  38px;
	--sp-text-5xl:  56px;
	--sp-text-6xl:  84px;

	--sp-leading-tight: 1.05;
	--sp-leading-snug:  1.2;
	--sp-leading-base:  1.6;
	--sp-leading-prose: 1.75;

	--sp-tracking-tight:  -0.01em;
	--sp-tracking-normal: 0.01em;
	--sp-tracking-wide:   0.08em;
	--sp-tracking-wider:  0.18em;
	--sp-tracking-widest: 0.24em;

	/* --- Spacing scale -------------------------------------------------- */
	--sp-space-1: 4px;
	--sp-space-2: 8px;
	--sp-space-3: 12px;
	--sp-space-4: 16px;
	--sp-space-5: 20px;
	--sp-space-6: 24px;
	--sp-space-7: 28px;
	--sp-space-8: 32px;
	--sp-space-9: 40px;
	--sp-space-10: 48px;
	--sp-space-11: 56px;
	--sp-space-12: 64px;
	--sp-space-14: 80px;
	--sp-space-16: 96px;

	--sp-section-pad-y:        80px;
	--sp-section-pad-y-sm:     48px;
	--sp-section-pad-y-mobile: 40px;
	--sp-page-gutter:          48px;
	--sp-page-gutter-mobile:   20px;
	--sp-container-max:        1280px;

	/* --- Radii ---------------------------------------------------------- */
	--sp-radius-xs:    6px;
	--sp-radius-sm:    10px;
	--sp-radius-md:    12px;
	--sp-radius-lg:    14px;
	--sp-radius-xl:    16px;
	--sp-radius-2xl:   18px;
	--sp-radius-3xl:   20px;
	--sp-radius-pill:  999px;

	/* --- Header / chrome ------------------------------------------------ */
	--sp-header-height:        80px;
	--sp-header-height-mobile: 64px;

	/* --- Breakpoints (used in @media — values informational, not consumable directly) */
	--sp-bp-sm: 480px;
	--sp-bp-md: 768px;
	--sp-bp-lg: 1024px;
	--sp-bp-xl: 1280px;

	/* --- Motion --------------------------------------------------------- */
	--sp-ease:   cubic-bezier(0.4, 0, 0.2, 1);
	--sp-dur-1: 150ms;
	--sp-dur-2: 200ms;
	--sp-dur-3: 300ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--sp-dur-1: 0ms;
		--sp-dur-2: 0ms;
		--sp-dur-3: 0ms;
	}
}