/* Biyani design tokens (design option A). One source for colour, type, spacing and radius.
   Values: docs/research/2026-09-26-design/fable-5.1-design-review.md section 3 and
   background-study.md rounds 2-4. Contrast ratios are against the ground named in the comment. */

:root {
	/* Colour: brand */
	--bj-purple: #430A41;          /* brand purple; ivory text 14.6:1 */
	--bj-purple-2: #5B1E57;        /* softer plum: footer ground; ivory text 11.2:1 */
	--bj-purple-3: #6A2A66;        /* lightest plum that still carries the logo (study round 2) */
	--bj-purple-silk-from: #4A0F47;/* dark end of the header silk gradient, behind the logo */
	--bj-purple-tint: #F1E8F3;
	--bj-gold: #CA9234;            /* brand gold: logo, rules, fills with ink text (6.3:1); 4.34:1 on purple-2 */
	--bj-gold-deep: #9C6D1C;       /* gold as text on light grounds: 4.55:1 on white */
	--bj-gold-light: #D9A850;      /* closest gold to brand gold #CA9234 with >= 4.5:1 on #6A2A66 (4.53:1) */

	/* Colour: neutrals */
	--bj-ivory: #FBF8F3;           /* page ground */
	--bj-ivory-2: #F5EFE5;         /* bands, announcement bar; ink text 15.6:1 */
	--bj-ink: #1C1A17;             /* the one text ink: 16.4:1 on ivory */
	--bj-stone: #4A443C;           /* secondary text: 9.1:1 on ivory */
	--bj-mute: #716B5B;            /* minimum text tone: 5.0:1 on ivory */
	--bj-line: rgba(28, 26, 23, .12);
	--bj-line-gold: rgba(202, 146, 52, .6);

	/* Colour: signals */
	--bj-garnet: #8C2F39;          /* sale / urgency only */
	--bj-whatsapp: #15803D;        /* white text 5.0:1 */

	/* Surfaces */
	--bj-plum-silk:
		linear-gradient(180deg, rgba(255, 255, 255, .08) 0, rgba(255, 255, 255, 0) 45%),
		linear-gradient(100deg, var(--bj-purple-silk-from) 0%, var(--bj-purple-2) 45%, var(--bj-purple-3) 100%);
	--bj-plum-royal:
		linear-gradient(180deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, 0) 40%),
		linear-gradient(100deg, var(--bj-purple) 0%, var(--bj-purple-2) 60%, var(--bj-purple-3) 100%);
	/* Damask: ivory ogee rings + gold dots, pure CSS (no image file). For grounds without small text. */
	--bj-damask:
		radial-gradient(ellipse 7px 12px at 50% 50%, rgba(251, 248, 243, 0) 55%, rgba(251, 248, 243, .14) 60% 72%, rgba(251, 248, 243, 0) 77%) 0 0 / 32px 40px,
		radial-gradient(ellipse 7px 12px at 50% 50%, rgba(251, 248, 243, 0) 55%, rgba(251, 248, 243, .14) 60% 72%, rgba(251, 248, 243, 0) 77%) 16px 20px / 32px 40px,
		radial-gradient(circle, rgba(202, 146, 52, .30) 0 1.5px, rgba(202, 146, 52, 0) 2px) 16px 0 / 32px 40px,
		radial-gradient(circle, rgba(202, 146, 52, .30) 0 1.5px, rgba(202, 146, 52, 0) 2px) 0 20px / 32px 40px;

	/* Type: Marcellus is display only and never bold; Jost for everything else */
	--bj-font-display: "Marcellus", Georgia, serif;
	--bj-font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bj-fs-display: 36px;         /* 36 phone, 64 desktop */
	--bj-fs-h1: 30px;              /* 30 / 44 */
	--bj-fs-h2: 26px;              /* 26 / 34 */
	--bj-fs-h3: 20px;              /* 20 / 24 */
	--bj-fs-body-lg: 17px;         /* 17 / 18 */
	--bj-fs-body: 16px;            /* 16, never 14 for running text */
	--bj-fs-small: 14px;           /* 14 */
	--bj-fs-caption: 12px;         /* 12 */
	--bj-fs-eyebrow: 12px;         /* 12, Jost 600 uppercase, .14em */
	--bj-fs-button: 14px;          /* 14, Jost 600 uppercase, .06em */
	--bj-fs-price-card: 15px;      /* 15 / 16, Jost 600 */
	--bj-fs-price-pdp: 24px;       /* 24 / 28, Marcellus */
	--bj-fs-menu: 18px;            /* 18 at 1024-1279, 20 at >= 1280 */

	/* Spacing: 4-base */
	--bj-space-1: 4px;
	--bj-space-2: 8px;
	--bj-space-3: 12px;
	--bj-space-4: 16px;
	--bj-space-5: 24px;
	--bj-space-6: 32px;
	--bj-space-7: 48px;
	--bj-space-8: 64px;
	--bj-space-9: 96px;
	--bj-section-pad: 48px;        /* 48 phone, 64 desktop */

	/* Radius, shadow, layout */
	--bj-radius-input: 4px;
	--bj-radius-card: 12px;
	--bj-radius-pill: 999px;
	--bj-shadow: 0 8px 24px rgba(28, 26, 23, .08);
	--bj-container: 1200px;
	--bj-container-prose: 760px;
	--bj-gutter: 24px;

	/* Frosted glass tokens (action rings, currency disc, back-to-top, carousel arrows) */
	--bj-glass-bg: rgba(252, 249, 243, 0.58);
	--bj-glass-bg-solid: rgba(255, 253, 248, 0.92);
	--bj-glass-bg-hover: rgba(252, 249, 243, 0.85);
	--bj-glass-blur: blur(14px) saturate(160%);
	--bj-glass-border: rgba(255, 255, 255, 0.55);
	--bj-glass-border-solid: rgba(140, 90, 43, 0.20);
	--bj-glass-shadow: 0 4px 16px rgba(18, 14, 10, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	--bj-glass-shadow-solid: 0 1px 2px rgba(18, 14, 10, 0.06);
	--bj-glass-ring: 0 0 0 1px rgba(255, 255, 255, 0.7); /* owner 2026-09-26: no gold ring anywhere */
}

@media (min-width: 768px) {
	:root {
		--bj-fs-display: 64px;
		--bj-fs-h1: 44px;
		--bj-fs-h2: 34px;
		--bj-fs-h3: 24px;
		--bj-fs-body-lg: 18px;
		--bj-fs-price-card: 16px;
		--bj-fs-price-pdp: 28px;
		--bj-section-pad: 64px;
	}
}

@media (min-width: 1280px) {
	:root { --bj-fs-menu: 20px; }
}