:root {
	/* Brand: deep navy ground, warm orange accent. Mirror every change to theme.json. */
	--myco-color-bg: #ffffff;
	--myco-color-surface: #f5f7fa;
	--myco-color-surface-strong: #e6ebf2;
	--myco-color-text: #12161c;
	--myco-color-muted: #5a6675;
	--myco-color-border: rgba(15, 27, 45, 0.12);
	--myco-color-primary: #0f1b2d;
	--myco-color-primary-soft: #1b2c45;
	--myco-color-primary-deep: #08101c;
	--myco-color-accent: #f26b0f;
	--myco-color-accent-soft: #ff8a35;
	--myco-color-accent-2: #2f4a6d;
	/* Accessible accent pair. #f26b0f is the identity orange but only reaches
	 * 3.05:1 against white, so it may be used for FILLS, BORDERS and RULES only.
	 * Any accent-colored TEXT — and any white text sitting on an accent fill —
	 * must use --myco-color-accent-ink (#bf4f05): 4.84:1 on white, 4.56:1 on the
	 * surface grey, so it clears WCAG AA in both places. Do not "restore" the
	 * brighter orange on these; Lighthouse flags it every time. On the navy
	 * ground the reverse holds: --myco-color-accent-soft is 7.36:1 there. */
	--myco-color-accent-ink: #bf4f05;
	--myco-color-accent-ink-hover: #a83f03;
	/* Semantic state tokens (form notices, badges) — functional states, not part of the visual identity. */
	--myco-color-success: #1f7a4d;
	--myco-color-danger: #b3341f;
	/* Channel brand colors, with the hover shade and the ink that meets contrast on each. */
	--myco-color-whatsapp: #25d366;
	--myco-color-whatsapp-hover: #1fbb59;
	--myco-color-whatsapp-ink: #06301a;
	--myco-color-telegram: #29a9eb;
	--myco-color-telegram-hover: #1c96d6;
	--myco-color-telegram-ink: #04263a;
	--myco-color-white: #ffffff;

	--myco-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--myco-font-size-sm: 0.875rem;
	--myco-font-size-base: 1rem;
	--myco-font-size-lg: 1.125rem;
	--myco-line-height: 1.65;
	--myco-line-height-tight: 1.12;

	--myco-container: 1240px;
	--myco-container-wide: 1400px;
	--myco-container-content: 760px;

	--myco-space-2xs: 0.25rem;
	--myco-space-xs: 0.5rem;
	--myco-space-sm: 0.75rem;
	--myco-space-md: 1rem;
	--myco-space-lg: 1.5rem;
	--myco-space-xl: 2rem;
	--myco-space-2xl: 3rem;
	--myco-space-3xl: 4.5rem;
	--myco-space-4xl: 6rem;

	--myco-radius-sm: 0.375rem;
	--myco-radius-md: 0.5rem;
	--myco-radius-lg: 0.75rem;
	--myco-radius-xl: 1rem;
	--myco-radius-2xl: 1.5rem;

	--myco-shadow-soft: 0 9px 30px rgba(15, 27, 45, 0.06);
	--myco-shadow-card: 0 10px 28px rgba(15, 27, 45, 0.09);
	--myco-shadow-lift: 0 18px 48px rgba(15, 27, 45, 0.16);

	--myco-z-header: 50;
	--myco-z-menu: 60;

	--myco-transition: 180ms ease;
	--myco-transition-slow: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}