/*
 * Design tokens — the single source of truth for color, type and spacing.
 * Every other stylesheet reads these custom properties rather than
 * hard-coding values, so the brand can be retuned globally from here.
 */

:root {
	/* Brand colors — deep emerald + warm gold, per the architecture doc */
	--sf-color-primary: #0b4f3f;
	--sf-color-primary-dark: #073829;
	--sf-color-primary-light: #e6efec;
	--sf-color-secondary: #c9a04b;
	--sf-color-secondary-dark: #a8813a;

	/* Neutrals */
	--sf-color-white: #ffffff;
	--sf-color-offwhite: #f7f5f0;
	--sf-color-charcoal: #262624;
	--sf-color-gray: #8a8a86;
	--sf-color-gray-light: #dcdcd7;
	--sf-color-border: #e6e3db;

	/* Semantic */
	--sf-color-success: #2f7a4f;
	--sf-color-warning: #c9822b;
	--sf-color-danger: #b3432f;
	--sf-color-whatsapp: #25d366;

	/* Typography */
	--sf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sf-font-display: Georgia, "Times New Roman", serif;

	/* Spacing scale */
	--sf-space-xs: 8px;
	--sf-space-sm: 12px;
	--sf-space-md: 20px;
	--sf-space-lg: 32px;
	--sf-space-xl: 56px;
	--sf-space-2xl: 88px;

	/* Radius & shadow */
	--sf-radius-sm: 8px;
	--sf-radius-card: 16px;
	--sf-radius-pill: 999px;
	--sf-shadow-soft: 0 4px 24px rgba(11, 79, 63, 0.08);
	--sf-shadow-lift: 0 12px 32px rgba(11, 79, 63, 0.14);

	/* Layout */
	--sf-container-width: 1200px;
	--sf-header-height: 76px;
	--sf-mobile-nav-height: 64px;
}