:root {
	/* Canonical Figma colors */
	--beadso-white: #ffffff;
	--beadso-black: #2d2d2d;
	--beadso-gray: #686868;
	--beadso-purple-900: #4a263d;
	--beadso-purple-800: #613250;
	--beadso-purple-700: #7e4067;
	--beadso-purple-600: #a15284;
	--beadso-purple-500: #b15a91;
	--beadso-purple-100: #e7ccdd;
	--beadso-purple-50: #f7eff4;
	--beadso-violet-900: #2f0d22;
	--beadso-violet-800: #3d112d;
	--beadso-violet-600: #651b4a;
	--beadso-violet-500: #6f1e51;
	--beadso-violet-100: #d2b9c9;
	--beadso-violet-50: #f1e9ee;
	--beadso-green-700: #004131;
	--beadso-green-600: #00533f;
	--beadso-green-500: #005b45;
	--beadso-green-100: #b0ccc5;
	--beadso-green-50: #e6efec;
	--beadso-brown-900: #4d3022;
	--beadso-brown-50: #f8f1ee;
	--beadso-grey-100: #d0d0d0;
	--beadso-black-30: #77808b;
	--beadso-dark-grey: #6a6a6a;

	/* Repeated semantic values observed in Figma */
	--beadso-ink-900: #1a0a13;
	--beadso-text-strong: #2b2b2b;
	--beadso-text-muted: #6e6e6e;
	--beadso-accent-muted: #9b6080;
	--beadso-academy-surface: #f7e8f1;
	--beadso-academy-surface-light: #fdf5f9;
	--beadso-border-default: #e2e8f0;
	--beadso-border-warm: #f3ece8;
	--beadso-danger: #d4183d;
	--beadso-warning-text: #7a5200;

	/* Typography */
	--beadso-font-primary: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--beadso-font-size-h3: 30px;
	--beadso-line-height-h3: 48px;
	--beadso-font-size-sub-strong: 20px;
	--beadso-line-height-sub-strong: 32px;
	--beadso-font-size-sub: 18px;
	--beadso-line-height-sub: 32px;
	--beadso-font-size-body: 16px;
	--beadso-line-height-body: 28px;
	--beadso-font-size-body-mobile: 14px;
	--beadso-line-height-body-mobile: 28px;
	--beadso-font-size-caption: 13px;
	--beadso-line-height-caption: 24px;

	/* Shared spacing aliases */
	--beadso-space-1: 4px;
	--beadso-space-2: 8px;
	--beadso-space-3: 12px;
	--beadso-space-4: 16px;
	--beadso-space-5: 20px;
	--beadso-space-6: 24px;
	--beadso-space-8: 32px;
	--beadso-space-10: 40px;
	--beadso-space-12: 48px;

	/* Repeated radius aliases */
	--beadso-radius-2: 8px;
	--beadso-radius-3: 12px;
	--beadso-radius-4: 16px;
	--beadso-radius-5: 20px;
	--beadso-radius-6: 24px;
	--beadso-radius-8: 32px;
	--beadso-radius-pill: 9999px;

	/* Layout */
	--beadso-container-max: 1280px;
	--beadso-page-gutter-desktop: 80px;
	--beadso-page-gutter-mobile: 16px;
	--beadso-account-gutter: 32px;

	/* Shadows */
	--beadso-shadow-card: 0 4px 15px rgba(0, 0, 0, 0.08);
	--beadso-shadow-category: 0 4px 50px rgba(111, 30, 81, 0.08);
	--beadso-shadow-account: 0 1px 6px rgba(43, 43, 43, 0.04);
	--beadso-shadow-academy-featured: 0 20px 24px rgba(101, 27, 74, 0.21);
	--beadso-shadow-cta: 0 4px 100px rgba(225, 208, 219, 0.2);

	/* Exact observed gradients */
	--beadso-gradient-primary: linear-gradient(90deg, #651b4a 0%, #b15a92 100%);
	--beadso-gradient-success: linear-gradient(90deg, #005b45 0%, #00c192 100%);
}
