/**
 * BioMyst design tokens.
 * Values transcribed from the hi-fi design (Claude Design project 150a809f).
 */

:root {
	/* ---- Brand palette ---- */
	--bm-bg: #EDF3F6;              /* page background */
	--bm-ink: #0C2230;             /* primary text / dark bands */
	--bm-ink-deep: #091C28;        /* hero gradient base */
	--bm-teal: #12AFCB;            /* primary action */
	--bm-teal-hover: #0E93AB;      /* action hover / on-light accent text */
	--bm-cyan: #3FD0E6;            /* on-dark accent */

	/* ---- Surfaces & borders ---- */
	--bm-surface: #ffffff;
	--bm-surface-muted: #FBFCFD;
	--bm-surface-sunken: #FAFCFD;
	--bm-border: #E7EEF1;          /* card borders */
	--bm-border-strong: #DCE4E8;   /* controls, inputs */
	--bm-border-header: #E0E8EC;   /* header/filter rules */
	--bm-border-input: #E2E9ED;
	--bm-border-hover: #C9D4DA;
	--bm-border-faint: #EEF3F5;
	--bm-border-faintest: #EBF0F3;
	--bm-radio-off: #C4CFD5;

	/* ---- Text ---- */
	--bm-text: #0C2230;
	--bm-text-mid: #3A4A54;
	--bm-text-soft: #5A6671;
	--bm-text-soft-2: #6A7780;
	--bm-text-muted: #8A969C;
	--bm-text-label: #7C8A93;
	--bm-text-faint: #9AA7AE;
	--bm-text-strike: #9AA7AE;
	--bm-placeholder: #AEBBC2;
	--bm-heading-alt: #16323F;

	/* ---- Status ---- */
	--bm-in-stock: #0E93AB;
	--bm-low-stock: #C68A12;
	--bm-out-stock: #BB3333;
	--bm-error: #E5484D;

	/* ---- Tints ---- */
	--bm-teal-tint: rgba(18, 175, 203, 0.10);
	--bm-teal-tint-12: rgba(18, 175, 203, 0.12);
	--bm-teal-tint-14: rgba(18, 175, 203, 0.14);
	--bm-teal-tint-05: rgba(18, 175, 203, 0.05);
	--bm-cyan-tint: rgba(63, 208, 230, 0.16);
	--bm-selection: rgba(18, 175, 203, 0.18);

	/* ---- On-dark text ---- */
	--bm-on-dark: rgba(255, 255, 255, 0.82);
	--bm-on-dark-soft: rgba(255, 255, 255, 0.72);
	--bm-on-dark-mid: rgba(255, 255, 255, 0.62);
	--bm-on-dark-muted: rgba(255, 255, 255, 0.60);
	--bm-on-dark-faint: rgba(255, 255, 255, 0.55);
	--bm-on-dark-faintest: rgba(255, 255, 255, 0.50);
	--bm-on-dark-line: rgba(255, 255, 255, 0.10);
	--bm-on-dark-line-soft: rgba(255, 255, 255, 0.08);

	/* ---- Typography ---- */
	--bm-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--bm-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* ---- Layout ---- */
	--bm-container: 1200px;
	--bm-gutter: clamp(16px, 4vw, 32px);
	--bm-section-y: clamp(48px, 6vw, 76px);
	--bm-header-h: 71px;

	/* ---- Radii ---- */
	--bm-r-sm: 6px;
	--bm-r-md: 9px;
	--bm-r-lg: 11px;
	--bm-r-xl: 12px;
	--bm-r-2xl: 14px;
	--bm-r-3xl: 16px;
	--bm-r-4xl: 18px;
	--bm-r-5xl: 22px;

	/* ---- Shadows ---- */
	--bm-shadow-card: 0 18px 40px -24px rgba(12, 34, 48, 0.35);
	--bm-shadow-row: 0 12px 28px -18px rgba(12, 34, 48, 0.30);
	--bm-shadow-gallery: 0 24px 60px -34px rgba(12, 34, 48, 0.28);
	--bm-shadow-panel: 0 32px 70px -34px rgba(12, 34, 48, 0.34), 0 2px 6px rgba(12, 34, 48, 0.04);
	--bm-shadow-toast: 0 18px 40px -16px rgba(12, 34, 48, 0.60);
	--bm-shadow-sheet: 0 -20px 50px -20px rgba(12, 34, 48, 0.40);
	--bm-shadow-mobile-card: 0 8px 20px -16px rgba(12, 34, 48, 0.30);
	--bm-focus-ring: 0 0 0 3px rgba(18, 175, 203, 0.14);

	/* ---- Motion ---- */
	--bm-t: 0.15s;
}