/**
 * Design tokens — Olive Medical Center.
 *
 * Surface hierarchy is white-first: pages are white or a very light sage tint,
 * #3B3C2A is spent on headings, one dark block per page, and the footer, and
 * #747769 only ever appears as secondary text or a thin divider. Everything
 * else is a tint mixed from the three brand hues — no unrelated colors.
 */

:root {
	/* Core palette (client-specified) */
	--color-bg: #d4d7ce;
	--color-section-alt: #747769;
	--color-heading: #3b3c2a;
	--color-white: #ffffff;
	--color-text-body: #5f6050;
	--color-text-on-dark: #edeee8;

	/* Surfaces — white leads, sage tints support */
	--color-surface: #ffffff;
	--color-surface-soft: #f6f7f3;
	--color-surface-tint: #eef0e8;
	--color-surface-dark: #32331f;

	/* Hairlines and dividers */
	--color-border: rgba(59, 60, 42, 0.12);
	--color-border-strong: rgba(59, 60, 42, 0.22);
	--color-border-on-dark: rgba(237, 238, 232, 0.16);

	/* Heading (#3B3C2A) tints / shades */
	--color-heading-90: color-mix(in srgb, var(--color-heading) 90%, var(--color-white));
	--color-heading-80: color-mix(in srgb, var(--color-heading) 80%, var(--color-white));
	--color-heading-60: color-mix(in srgb, var(--color-heading) 60%, var(--color-white));
	--color-heading-40: color-mix(in srgb, var(--color-heading) 40%, var(--color-white));
	--color-heading-20: color-mix(in srgb, var(--color-heading) 20%, var(--color-white));
	--color-heading-10: color-mix(in srgb, var(--color-heading) 10%, var(--color-white));
	--color-heading-08: rgba(59, 60, 42, 0.08);
	--color-heading-12: rgba(59, 60, 42, 0.12);

	/* Page background (#D4D7CE) tints / shades */
	--color-bg-light: color-mix(in srgb, var(--color-bg) 40%, var(--color-white));
	--color-bg-mid: color-mix(in srgb, var(--color-bg) 85%, var(--color-heading));
	--color-bg-dark: color-mix(in srgb, var(--color-bg) 70%, var(--color-heading));

	/* Alternate section (#747769) tints / shades */
	--color-section-alt-90: color-mix(in srgb, var(--color-section-alt) 90%, var(--color-white));
	--color-section-alt-80: color-mix(in srgb, var(--color-section-alt) 80%, var(--color-white));
	--color-section-alt-60: color-mix(in srgb, var(--color-section-alt) 60%, var(--color-white));
	--color-section-alt-40: color-mix(in srgb, var(--color-section-alt) 40%, var(--color-white));
	--color-section-alt-dark: color-mix(in srgb, var(--color-section-alt) 80%, var(--color-heading));

	/*
	 * Single accent: a warm muted gold shifted out of the olive family just far
	 * enough to read as an accent. Used only on eyebrow labels, card links,
	 * icons, and price figures — never as a surface.
	 */
	--color-accent: #7e6f3e;
	--color-accent-hover: #6a5d31;
	--color-accent-bright: #a89561;
	--color-accent-soft: #f2efe4;

	/* Secondary / muted copy */
	--color-text-muted: #74766a;
	--color-text-soft: #8d8f83;
	--color-text-on-dark-muted: rgba(237, 238, 232, 0.72);

	/* Typography */
	--font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Jost", system-ui, -apple-system, sans-serif;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Fluid type scale — mobile → desktop without breakpoint jumps */
	--fs-display: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem);
	--fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
	--fs-h2: clamp(1.875rem, 1.35rem + 2.4vw, 3.125rem);
	--fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
	--fs-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--fs-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--fs-small: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--fs-micro: 0.6875rem;

	/* Line heights */
	--lh-heading: 1.14;
	--lh-body: 1.7;

	/* Letter spacing */
	--ls-display: -0.02em;
	--ls-eyebrow: 0.16em;

	/* Spacing — 8px base scale */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 40px;
	--space-6: 48px;
	--space-7: 56px;
	--space-8: 64px;
	--space-9: 72px;
	--space-10: 80px;

	/* Border radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-pill: 999px;

	/* Shadows — heading color at low opacity, never pure black */
	--shadow-hairline: 0 1px 2px rgba(59, 60, 42, 0.04);
	--shadow-card: 0 2px 10px rgba(59, 60, 42, 0.05);
	--shadow-soft: 0 8px 24px rgba(59, 60, 42, 0.07);
	--shadow-soft-hover: 0 14px 34px rgba(59, 60, 42, 0.1);
	--shadow-lift: 0 24px 60px rgba(59, 60, 42, 0.12);

	/* Layout */
	--container-max: 1200px;
	--container-wide: 1320px;
	--container-narrow: 720px;
	--container-pad: clamp(var(--space-2), 4vw, var(--space-5));
	--header-height: 80px;

	/* Motion */
	--duration: 400ms;
	--duration-fast: 220ms;
	--easing: cubic-bezier(0.22, 0.61, 0.36, 1);

	/*
	 * Breakpoints (documentation only — custom properties cannot be used
	 * in @media queries; use the pixel values in CSS files):
	 * mobile  ≤ 767px
	 * tablet  768px – 1023px
	 * desktop ≥ 1024px
	 */
}