/**
 * Design tokens for the FurShipper Help Center.
 * Everything is scoped to .fshc-root so nothing leaks into the parent theme.
 * Brand: Gold / Cream / Ink, Inter Tight (headings) + Urbanist (body).
 * Swap a brand palette in by editing only this file (or the equivalent
 * inline override printed from Help Center → Settings → Branding).
 */
.fshc-root {
	--fshc-color-primary: #eebc37;
	--fshc-color-primary-hover: #d9a81e;
	--fshc-color-accent: #eedeb3;
	--fshc-color-on-accent: #0f0f0f;
	--fshc-color-on-accent-hover: #0f0f0f;
	--fshc-button-radius: 999px;

	--fshc-color-customer: #8a6b10;
	--fshc-color-customer-bg: #fbf3de;
	--fshc-color-driver: #272727;
	--fshc-color-driver-bg: #f4f5f5;

	--fshc-color-text: #0f0f0f;
	--fshc-color-muted: #525252;
	--fshc-color-border: #e5e5e5;
	--fshc-color-surface: #ffffff;
	--fshc-color-surface-alt: #f4f5f5;

	/* Fixed brand ink — does NOT flip in dark mode. For small deliberate
	   accents (step-number badges) that should stay a dark circle regardless
	   of theme, rather than tracking the page's --fshc-color-text. */
	--fshc-color-ink: #0f0f0f;

	--fshc-callout-tip-bg: #fbf3de;
	--fshc-callout-tip-border: #eedeb3;
	--fshc-callout-tip-text: #6b4e00;
	--fshc-callout-important-bg: #fdeeee;
	--fshc-callout-important-border: #f3c8c8;
	--fshc-callout-important-text: #8a1f1f;
	--fshc-callout-warning-bg: #fff4e5;
	--fshc-callout-warning-border: #f6d9a8;
	--fshc-callout-warning-text: #8a5a00;
	--fshc-callout-note-bg: #f4f5f5;
	--fshc-callout-note-border: rgb( 15 15 15 / 12% );
	--fshc-callout-note-text: #525252;

	--fshc-font-heading: 'Inter Tight', sans-serif;
	--fshc-font-body: 'Urbanist', sans-serif;

	--fshc-radius: 14px;
	--fshc-radius-sm: 8px;
	--fshc-shadow: 0 1px 3px rgb( 15 15 15 / 8% );
	--fshc-shadow-lg: 0 8px 24px rgb( 15 15 15 / 10% );

	--fshc-space-1: 4px;
	--fshc-space-2: 8px;
	--fshc-space-3: 12px;
	--fshc-space-4: 16px;
	--fshc-space-5: 20px;
	--fshc-space-6: 24px;
	--fshc-space-7: 32px;
	--fshc-space-8: 48px;

	--fshc-container-max: 1440px;

	color: var( --fshc-color-text );
	font-family: var( --fshc-font-body );
	background: var( --fshc-color-surface );
}

@media ( prefers-color-scheme: dark ) {
	.fshc-root:not( [data-theme="light"] ) {
		--fshc-color-text: #f3f1ea;
		--fshc-color-muted: #b7b2a6;
		--fshc-color-border: rgb( 255 255 255 / 12% );
		--fshc-color-surface: #171717;
		--fshc-color-surface-alt: #272727;

		--fshc-color-customer: #f0d48a;
		--fshc-color-customer-bg: #3a2e0e;
		--fshc-color-driver: #e8e8e5;
		--fshc-color-driver-bg: #333333;

		--fshc-callout-tip-bg: #2e2712;
		--fshc-callout-tip-border: #4a3e1a;
		--fshc-callout-tip-text: #f0d48a;
		--fshc-callout-important-bg: #2a1414;
		--fshc-callout-important-border: #4a1c1c;
		--fshc-callout-important-text: #f2a3a3;
		--fshc-callout-warning-bg: #2a1f0e;
		--fshc-callout-warning-border: #4a3618;
		--fshc-callout-warning-text: #f3c988;
		--fshc-callout-note-bg: #262626;
		--fshc-callout-note-border: rgb( 255 255 255 / 12% );
		--fshc-callout-note-text: #c9c5bc;
	}
}

.fshc-root[data-theme="dark"] {
	--fshc-color-text: #f3f1ea;
	--fshc-color-muted: #b7b2a6;
	--fshc-color-border: rgb( 255 255 255 / 12% );
	--fshc-color-surface: #171717;
	--fshc-color-surface-alt: #272727;
	--fshc-color-customer: #f0d48a;
	--fshc-color-customer-bg: #3a2e0e;
	--fshc-color-driver: #e8e8e5;
	--fshc-color-driver-bg: #333333;
}