/*
 * Robins Range design tokens.
 *
 * Ported from project-docs/Robins Range Design System/tokens/. That library is the
 * source of truth — change it there first, then re-port. Token names are preserved
 * exactly so design and build stay speakable in the same terms.
 *
 * The @font-face import lives in the theme's wp_enqueue_style call, not here.
 */

:root {
	/* ---- Colour primitives ---- */
	--color-orange-500: #FF6600;
	--color-ink-900: #000000;
	--color-blue-700: #1D2FA6;
	--color-blue-500: #1D42D9;
	--color-blue-200: #A8C4E5; /* pale band on Sildenafil pack */
	--color-red-600: #C41E1E;
	--color-navy-800: #1D1C68;
	--color-magenta-700: #901D6B;
	--color-amber-500: #F2A900;
	--color-yellow-400: #F5C518; /* Day Cough arc accent */
	--color-green-600: #2E7D32; /* logo leaf green */
	--color-whatsapp: #25D366; /* fixed — never reskin */
	--color-neutral-0: #FFFFFF;
	--color-neutral-50: #FAFAFA;
	--color-neutral-100: #F4F4F5;
	--color-neutral-200: #E4E4E7;
	--color-neutral-300: #D4D4D8;
	--color-neutral-400: #A1A1AA;
	--color-neutral-500: #71717A;
	--color-neutral-600: #52525B;
	--color-neutral-700: #3F3F46;
	--color-neutral-800: #27272A;
	--color-neutral-900: #18181B;

	/* ---- Colour semantics ---- */
	--color-brand-primary: var(--color-orange-500);
	--color-brand-primary-hover: #E65C00;
	--color-text-primary: var(--color-ink-900);
	--color-text-muted: var(--color-neutral-600);
	--color-text-inverse: var(--color-neutral-0);
	--color-surface-default: var(--color-neutral-0);
	--color-surface-alt: var(--color-neutral-100);
	--color-border-default: var(--color-neutral-200);
	--color-category-vitality: var(--color-blue-700);
	--color-category-coldflu: var(--color-red-600);
	--color-category-multisymptom: var(--color-magenta-700);
	--color-category-antiseptic: var(--color-neutral-500); /* TBD — reserved until antiseptic list arrives */
	--color-feedback-caution: var(--color-amber-500); /* medical warning banners ONLY — never a text background */
	--color-feedback-caution-bg: #FDF3D7;
	--color-focus-ring: var(--color-blue-500);

	/* ---- Typography ---- */
	--font-display: 'Lora', Georgia, 'Times New Roman', serif; /* echoes the Robin's logotype — humanist serif */
	--font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* pack/UI grotesque */

	/* mobile-first 4-step scale */
	--type-display-size: 32px;
	--type-display-line: 40px;
	--type-display-size-desktop: 48px;
	--type-display-line-desktop: 56px;
	--type-h2-size: 24px;
	--type-h2-line: 28px;
	--type-h2-size-desktop: 32px;
	--type-h2-line-desktop: 38px;
	--type-body-size: 16px;
	--type-body-line: 26px;
	--type-small-size: 14px; /* minimum for legal/warning text — never smaller */
	--type-small-line: 20px;
	--type-weight-regular: 400;
	--type-weight-medium: 500;
	--type-weight-semibold: 600;
	--type-weight-bold: 700;
	--type-tag-tracking: 0.06em; /* uppercase tags/eyebrows */

	/* ---- Space, radius, shadow, layout ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-6: 40px;
	--space-8: 64px;
	--radius-sm: 6px; /* tags, inputs */
	--radius-md: 12px; /* cards */
	--radius-pill: 999px; /* category tags, CTA buttons */
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.10), 0 10px 24px rgba(0, 0, 0, 0.10);
	--tap-target-min: 44px;
	--content-max: 1080px;
	--prose-max: 68ch; /* 65–75 char line-length cap */
	--bp-tablet: 640px;
	--bp-desktop: 1024px;
}

/*
 * The design system declares a mobile-first scale with separate -desktop tokens,
 * but the prototype never implemented the switch — it hardcodes one or the other
 * per element, and ships no media queries at all. Reassigning the base tokens at
 * the desktop breakpoint means markup references --type-display-size once and gets
 * the right value at both sizes. Custom properties can't be used in a media query
 * condition, so 1024px is written out; it is --bp-desktop.
 */
@media ( min-width: 1024px ) {

	:root {
		--type-display-size: var(--type-display-size-desktop);
		--type-display-line: var(--type-display-line-desktop);
		--type-h2-size: var(--type-h2-size-desktop);
		--type-h2-line: var(--type-h2-line-desktop);
	}
}

/* ---- Base ---- */
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	color: var(--color-text-primary);
	background: var(--color-surface-default);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	margin: 0;
}

a {
	color: var(--color-brand-primary);
	text-decoration: none;
}

a:hover {
	color: var(--color-brand-primary-hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 3px solid var(--color-focus-ring); /* never remove :focus */
	outline-offset: 2px;
}

img {
	max-width: 100%;
	display: block;
}