/* ==========================================================================
   SmartPik design tokens — match brand_asset/smartpik_brandpallette.png
   ========================================================================== */

:root {
	/* Brand palette (from smartpik_brandpallette.png) */
	--sp-navy:        #0B1F4D;
	--sp-blue:        #1A57FF;   /* primary CTA */
	--sp-sky:         #3F86FF;
	--sp-teal:        #1FB6A8;
	--sp-drop:        #54CFE6;
	--sp-ink:         #0F1A2E;
	--sp-graphite:    #3A3F4B;
	--sp-muted:       #6B7280;
	--sp-stroke:      #E5E7EB;
	--sp-surface:     #F4F6FB;
	--sp-mint:        #D7F4EE;
	--sp-yellow:      #FFD400;
	--sp-yellow-soft: #FFF4B0;
	--sp-coral:       #FF5A4D;
	--sp-coral-soft:  #FFE2DD;
	--sp-white:       #FFFFFF;
	--sp-black:       #000000;

	/* Semantic */
	--sp-bg:          #FFFFFF;
	--sp-fg:          var(--sp-ink);
	--sp-fg-soft:     var(--sp-graphite);
	--sp-fg-muted:    var(--sp-muted);
	--sp-link:        var(--sp-blue);
	--sp-border:      var(--sp-stroke);
	--sp-card-bg:     #FFFFFF;
	--sp-card-shadow: 0 1px 2px rgba(15,26,46,.06), 0 6px 18px rgba(15,26,46,.06);
	--sp-card-shadow-h: 0 8px 28px rgba(11,31,77,.12);

	/* Typography */
	--sp-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sp-font-body:    'Inter',   system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Type scale */
	--sp-fz-100: 12px;
	--sp-fz-150: 14px;
	--sp-fz-200: 16px;
	--sp-fz-250: 18px;
	--sp-fz-300: 20px;
	--sp-fz-350: 22px;
	--sp-fz-400: 26px;
	--sp-fz-450: 30px;
	--sp-fz-500: 34px;
	--sp-fz-600: 40px;
	--sp-fz-700: 48px;
	--sp-fz-800: 56px;
	--sp-fz-900: 68px;

	/* Spacing */
	--sp-sp-1: 4px;
	--sp-sp-2: 8px;
	--sp-sp-3: 12px;
	--sp-sp-4: 16px;
	--sp-sp-5: 20px;
	--sp-sp-6: 24px;
	--sp-sp-7: 32px;
	--sp-sp-8: 48px;
	--sp-sp-9: 64px;
	--sp-sp-10: 96px;

	/* Radii */
	--sp-r-sm: 8px;
	--sp-r-md: 14px;
	--sp-r-lg: 22px;
	--sp-r-xl: 32px;
	--sp-r-pill: 9999px;

	/* Shells / breakpoints */
	--sp-shell-max: 1464px;
	--sp-shell-pad: 24px;

	/* Header heights — keep in sync with header.php sticky logic */
	--sp-header-h: 80px;
	--sp-utility-h: 36px;

	/* Motion */
	--sp-ease: cubic-bezier(.16,1,.3,1);
}

@media (max-width: 768px) {
	:root {
		--sp-shell-pad: 16px;
		--sp-header-h: 64px;
		--sp-utility-h: 32px;
	}
}