/**
 * Design tokens — VVouch Custom theme.
 *
 * Palette and type pairing from the Phase 1 blueprint: SABQ Group's warm,
 * rounded, pill-driven structure, re-accented with VVouch's own amber/navy
 * brand colours instead of SABQ's gold. Every other stylesheet reads these
 * variables rather than hardcoding values — see base.css and components.css.
 */

:root {
	/* Colour */
	--color-ink: #1D1B17;
	--color-ink-soft: #4A463C;
	--color-paper: #FBF9F5;
	--color-wash: #F1ECE0;
	--color-surface: #FFFFFF;
	--color-border: #E6E0D2;
	--color-muted: #8A8272;
	--color-accent: #D97F27;
	--color-accent-600: #A85F1B;
	--color-accent-100: #F6E3CE;
	--color-navy: #1E2A44;
	--color-navy-700: #141D30;
	--color-ok: #3F7D5C;
	--color-error: #B3412C;

	/* Typography */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;

	/* Layout */
	--container-width: 1240px;
	--container-padding: 24px;
	--section-spacing: 112px;
	--section-spacing-mobile: 56px;

	/* Radius & shadow */
	--radius-card: 18px;
	--radius-pill: 999px;
	--radius-input: 12px;
	--shadow-card: 0 12px 32px -18px rgba(29, 27, 23, 0.28);
	--shadow-header: 0 10px 30px -18px rgba(29, 27, 23, 0.35);

	/* Motion */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 260ms;
}