/**
 * She4Sea design tokens.
 *
 * Extracted 1:1 from the "SHEFORSEA brand website design" source. Every colour
 * below appears verbatim in the design file, so widgets, WooCommerce overrides
 * and Elementor global colours all resolve to the same palette.
 */

:root {
	/* --- Deep sea (backgrounds, headers, footers) --- */
	--s4s-navy-900: #08243B;
	--s4s-navy-850: #0A2740;
	--s4s-navy-800: #0B2E4A;
	--s4s-navy-700: #0E3253;
	--s4s-navy-600: #10395B;
	--s4s-blue-700: #1B4E7C;
	--s4s-blue-600: #2E6E96;
	--s4s-indigo: #2B4B93;

	/* --- Signal blues (marketplace + academy accents) --- */
	--s4s-cyan: #1FA9E4;
	--s4s-cyan-200: #7FD4F5;
	--s4s-cyan-050: #CFE6F4;

	/* --- Gold (primary brand accent / CTA) --- */
	--s4s-gold: #C6A24C;
	--s4s-gold-hover: #D8B968;
	--s4s-gold-light: #DFC079;
	--s4s-gold-dark: #B08B2E;
	--s4s-yellow: #F6EF51;

	/* --- Sand & paper (light surfaces) --- */
	--s4s-sand: #F5EFE3;
	--s4s-sand-deep: #EFE7D6;
	--s4s-cream: #EFE9DB;
	--s4s-cream-warm: #F6F1E7;
	--s4s-paper: #FFFDF8;
	--s4s-paper-warm: #F8F3E9;

	/* --- Text --- */
	--s4s-ink: #16242E;
	--s4s-slate: #4E6A7E;
	--s4s-slate-deep: #3C5B70;
	--s4s-mist: #C6D6E2;
	--s4s-mist-2: #A9C4D6;
	--s4s-mist-3: #8FB0C6;
	--s4s-mist-4: #6E90A6;
	--s4s-avatar-bg: #DCE7ED;

	/* --- Status (shared with the admin/order UI) --- */
	--s4s-ok-bg: #E7F6EC;
	--s4s-ok-fg: #1B7F45;
	--s4s-warn-bg: #FEF6E7;
	--s4s-warn-fg: #9A6B10;
	--s4s-info-bg: #EEF6FB;
	--s4s-info-fg: #1B7BA8;
	--s4s-neutral-bg: #F1F5F9;
	--s4s-neutral-fg: #64748B;
	--s4s-danger: #E11D48;

	/* --- Lines --- */
	--s4s-line: rgba(16, 57, 91, .12);
	--s4s-line-strong: rgba(16, 57, 91, .22);
	--s4s-line-soft: rgba(16, 57, 91, .1);
	--s4s-line-onDark: rgba(239, 233, 219, .32);
	--s4s-line-gold: rgba(198, 162, 76, .30);

	/* --- Gradients used by the section headers --- */
	--s4s-grad-hero: linear-gradient(158deg, #08243B 0%, #10395B 46%, #2E6E96 128%);
	--s4s-grad-deep: linear-gradient(158deg, #08243B, #10395B 70%, #2E6E96 150%);
	--s4s-grad-market: linear-gradient(150deg, #08243B 0%, #1B4E7C 58%, #1FA9E4 150%);
	--s4s-grad-academy: linear-gradient(155deg, #08243B 0%, #10395B 55%, #2B4B93 140%);
	--s4s-grad-journal: linear-gradient(150deg, #08243B, #10395B);
	--s4s-grad-band: linear-gradient(120deg, #10395B, #1FA9E4);

	/* --- Type --- */
	--s4s-font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--s4s-font-body: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--s4s-h1: clamp(38px, 5.2vw, 66px);
	--s4s-h2: clamp(26px, 3.2vw, 38px);
	--s4s-h3: clamp(22px, 2.4vw, 28px);
	--s4s-lead: 18px;
	--s4s-body: 16px;
	--s4s-small: 13.5px;
	--s4s-eyebrow: 12px;

	/* --- Layout --- */
	--s4s-wide: 1200px;
	--s4s-content: 1000px;
	--s4s-narrow: 820px;
	--s4s-gutter: 32px;
	--s4s-section-y: 92px;

	/* --- Shape --- */
	--s4s-radius: 6px;
	--s4s-radius-sm: 3px;
	--s4s-radius-pill: 99px;
	--s4s-shadow-card: 0 1px 2px rgba(8, 36, 59, .04);
	--s4s-shadow-pop: 0 18px 44px rgba(8, 36, 59, .18);

	/* --- Motion --- */
	--s4s-ease: cubic-bezier(.4, 0, .2, 1);
	--s4s-fast: .18s;
	--s4s-slow: .32s;
}

@media (max-width: 782px) {
	:root {
		--s4s-gutter: 20px;
		--s4s-section-y: 60px;
	}
}