:root {
	/* Brand colours */
	--fabr-colour-primary: #00a7d1;
	--fabr-colour-primary-dark: #008fb3;
	--fabr-colour-primary-soft: #eefbff;
	--fabr-colour-action: #007f9f;
	--fabr-colour-action-hover: #006b82;
	--fabr-colour-focus: #007f9f;
	--fabr-colour-success: #16a34a;
	--fabr-colour-warning: #f59e0b;
	--fabr-colour-danger: #ef4444;

	/* Text colours */
	--fabr-colour-text: #18212f;
	--fabr-colour-text-muted: #64748b;
	--fabr-colour-text-subtle: #94a3b8;
	--fabr-colour-text-inverse: #ffffff;

	/* Border colours */
	--fabr-colour-border: #e2e8f0;
	--fabr-colour-border-strong: #cbd5e1;
	--fabr-colour-border-inverse: rgba(255, 255, 255, 0.14);

	/* Surface colours */
	--fabr-colour-surface: #ffffff;
	--fabr-colour-surface-raised: #fbfdff;
	--fabr-colour-surface-muted: #f8fafc;
	--fabr-colour-surface-page: #f5f8fb;
	--fabr-colour-surface-dark: #0f172a;
	--fabr-colour-surface-dark-raised: #1e293b;

	/* Border radii */
	--fabr-radius-xs: 8px;
	--fabr-radius-sm: 14px;
	--fabr-radius-md: 18px;
	--fabr-radius-lg: 24px;
	--fabr-radius-xl: 30px;
	--fabr-radius-pill: 999px;

	/* Shadows */
	--fabr-shadow-sm: 0 12px 28px rgba(15, 23, 42, 0.07);
	--fabr-shadow-md: 0 18px 45px rgba(15, 23, 42, 0.10);
	--fabr-shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.10);
	--fabr-shadow-dark: 0 24px 60px rgba(15, 23, 42, 0.22);

	/* Spacing scale */
	--fabr-space-1: 4px;
	--fabr-space-2: 8px;
	--fabr-space-3: 12px;
	--fabr-space-4: 16px;
	--fabr-space-5: 20px;
	--fabr-space-6: 24px;
	--fabr-space-7: 28px;
	--fabr-space-8: 32px;
	--fabr-space-10: 40px;
	--fabr-space-12: 48px;

	/* Transition timings */
	--fabr-transition-fast: 120ms ease;
	--fabr-transition-base: 180ms ease;
	--fabr-transition-slow: 240ms ease;
	--fabr-transition-reveal: 320ms ease-out;
}