/* =====================================================================
 * @font-face declarations — Very Vogue Serif Family (self-hosted).
 * Web fonts uploaded to WP media 2026-07-13:
 *   media 16 → Very Vogue Display Regular
 *   media 17 → Very Vogue Display Italic
 *   media 18 → Very Vogue Text Regular
 *   media 19 → Very Vogue Text Italic
 * ===================================================================== */
@font-face {
	font-family: "Very Vogue Display";
	src: url("https://visitclaritydental.com/wp-content/uploads/2026/07/veryvogue-display-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Very Vogue Display";
	src: url("https://visitclaritydental.com/wp-content/uploads/2026/07/veryvogue-display-italic-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Very Vogue Text";
	src: url("https://visitclaritydental.com/wp-content/uploads/2026/07/veryvogue-text-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Very Vogue Text";
	src: url("https://visitclaritydental.com/wp-content/uploads/2026/07/veryvogue-text-italic-webfont.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* =====================================================================
 * Clarity Dental — brand tokens.
 *
 * Mapped 1:1 from design-systems/visitclaritydental.com/tokens/*.
 * Palette: spa-calm earthy — cream/bone canvas, clay primary, sage accent,
 * espresso inverse, ink text. Flat (no shadows); separation is color-band + 1px hairline.
 * Type: IvyPresto Display (H1) + IvyPresto Text (H2/H3) + Arboria (body/UI).
 * Override-only file: do not write component CSS here.
 * ===================================================================== */

:root {
	/* Color — earthy, warm, grounded */
	--color-bg-page: #F4EDDD;            /* cream — the canvas */
	--color-bg-surface: #FBF8F1;         /* warm near-white, the lightest step of the cream family.
	                                        NEVER pure #FFF: the brand bans bright clinical whites. */
	--color-bg-subtle: #EBE0CD;          /* bone — subtle surface / band alt */
	--color-bg-inverse: #3B2A1F;         /* espresso — inverse band */
	--color-brand-primary: #B8865A;      /* clay — buttons, italic accent, hairline dividers */
	--color-brand-primary-hover: #A0714A;
	--color-brand-accent: #8B9075;       /* sage — quiet emphasis, on-dark eyebrow */
	--color-text-primary: #1F1611;       /* ink */
	--color-text-secondary: #6E5F52;     /* warm-taupe for supporting body */
	--color-text-inverse: #F4EDDD;
	--color-text-inverse-secondary: #C9B99F;
	--color-border-default: #E0D3BC;
	--color-border-strong: #C4B8A5;      /* iron-soft — the 48×1 hairline color */

	/* Type — Very Vogue (self-hosted display + text serif) + Google Fonts
	   Inter / Public Sans / Source Serif 4 mix. Role map:
	     --font-display    → hero H1, statement moments
	     --font-editorial  → section H2/H3, editorial prose
	     --font-body       → body, UI, CTAs, eyebrows
	     --font-editorial-prose → drop-cap body in heritage renderer
	     --font-utility    → technical/spec UI text (reserved) */
	--font-display: "Very Vogue Display", "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-editorial: "Very Vogue Text", "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-editorial-prose: "Source Serif 4", "Very Vogue Text", Georgia, "Times New Roman", serif;
	--font-body: "Public Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-eyebrow: "Special Gothic Expanded One", "Public Sans", "Inter", system-ui, sans-serif;
	--font-utility: "Inter", "Public Sans", system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	/* Editorial display scale. Operator dialed hero down 2026-07-15 to
	   clamp(2.5rem, 6vw, 8rem). Section H2 to ~80px is preserved because
	   it does the mid-page attention work. */
	--fs-display-hero: clamp(2.5rem, 6vw, 8rem);                 /* 40px → 128px */
	--fs-display-section: clamp(2.25rem, 4vw + 0.75rem, 5rem);   /* up to ~80px */
	--fs-display-set-piece: clamp(3rem, 7vw, 7rem);              /* statement / mission oversized moments */
	--fs-h3: clamp(1.5rem, 0.8vw + 1.15rem, 2rem);
	--fs-h4: 1.125rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-eyebrow: 0.75rem;                                       /* 12px */
	--ls-eyebrow: 0.3em;                                         /* +3.6px — the kayla-skye expanded rhythm */
	--ls-display: -0.005em;

	--lh-display: 1.0;    /* editorial tight — bigger sizes want less leading */
	--lh-body: 1.625;

	/* Radii — near-flat (no rounded card language) */
	--radius-xs: 2px;   /* buttons + inline chips */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	/* Shadows — NONE. Separation via color bands + 1px hairlines.
	   Override vgs-base's card shadow with a transparent value so any inherited
	   component that reaches for --shadow-card is neutralized on Clarity. */
	--shadow-card: 0 0 0 rgba(0,0,0,0);
	--shadow-lift: 0 0 0 rgba(0,0,0,0);
}