:root {
	/* ── Brand (ground truth from makingyousmile.nyc Oxygen CSS) ─ */
	--color-navy:       #182f6c;   /* primary dark — headings, dark sections */
	--color-blue:       #28b2f5;   /* MYS Blue — CTAs, accents, underlines   */
	--color-blue-light: #84c3e3;   /* sky blue — secondary section panels     */
	--color-charcoal:   #404040;   /* body text, announcement bar             */
	--color-white:      #ffffff;
	--color-off-white:  #f7f7f7;
	--color-black:      #000000;

	--color-eggshell:   #eaebf0;   /* interior page alternating section BG (Oxygen color 12) */
	--color-blue-mid:   #1465b8;   /* medium blue — home page accent panels */

	--color-divider:    #6b6b6b;   /* 70×0.5px rule bars (oxel divider, home/footer) */
	--color-charcoal-line: #374047; /* hairline on charcoal panels (testimonial band button) */
	--color-panel:      #f9f9fa;   /* collapsible address/hours panel bg (contact, neighborhood) */

	/* Grays */
	--color-gray-100: #f5f5f5;
	--color-gray-200: #e5e5e5;
	--color-gray-300: #d9d9d4;   /* article hairlines + TOC scrollbar (Claude Design article set) */
	--color-gray-400: #9b9b9b;
	--color-gray-600: #666666;
	--color-gray-800: #404040;

	/* ── Typography ─────────────────────────────────────────── */
	--font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
	--font-sans:  'Poppins', 'Helvetica Neue', Arial, sans-serif;

	--font-size-sm:   0.875rem;   /* 14px */
	--font-size-base: 1rem;       /* 16px */
	--font-size-lg:   1.125rem;   /* 18px */
	--font-size-xl:   1.5rem;     /* 24px */
	--font-size-2xl:  2rem;       /* 32px — matches live site 2em headings */
	--font-size-3xl:  2.5rem;     /* 40px */

	--line-height-base:  1.6;
	--line-height-tight: 1.3;     /* matches live site heading line-height */

	/* refinement phase (2026-08): hero kicker/display split */
	--font-size-display: clamp(2.25rem, 4.5vw, 3rem);
	--font-size-kicker:  0.9375rem;
	--tracking-kicker:   0.14em;

	/* ── Spacing ─────────────────────────────────────────────── */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-7:  1.75rem;
	--space-8:  2rem;
	--space-9:  2.25rem;
	--space-10: 2.5rem;
	--space-11: 2.75rem;
	--space-12: 3rem;
	--space-13: 3.25rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-18: 4.5rem;
	--space-20: 5rem;
	--space-22: 5.5rem;
	--space-24: 6rem;

	/* section vertical rhythm (refinement phase) */
	--section-pad-y:    var(--space-20);   /* 80px desktop */
	--section-pad-y-md: var(--space-16);   /* 64px ≤991 */
	--section-pad-y-sm: var(--space-12);   /* 48px ≤767 */

	--drawer-gutter: 42px;   /* mega-menu text edge: 30px accordion pad + 12px link pad */
	--slider-rail:   44px;   /* reserved arrow lane on mobile sliders */

	/* ── Layout ──────────────────────────────────────────────── */
	--container-max: 1280px;     /* live site ct-section-inner-wrap + content grid: max-width 1280px */
	--container-pad: var(--space-6);
	--header-height: 110px;    /* live desktop bar renders 110px (row declares 120px but display:inline collapses it to the 110px container); mobile row renders 120px — overridden ≤767 below */

	/* ── Z-index scale ───────────────────────────────────────── */
	--z-hero-img:       0;  /* hero <img> layer, fills the section behind content */
	--z-hero-content:   1;  /* hero text/button overlay, sits above the image */
	--z-sticky-toc:     1;  /* sticky article TOC; never crosses the header */
	--z-header:       100;  /* sticky header; overlay starts below it, so 100 is enough */
	--z-overlay:      900;  /* darkens content behind open mega menu */
	--z-megamenu:    1000;  /* dropdown panel, above overlay */

	/* ── Radii ───────────────────────────────────────────────── */
	--radius-sm:  4px;
	--radius-md:  8px;
	--radius-lg:  16px;
	--radius-pill: 50px;         /* live site CTA buttons */

	/* ── Shadows ─────────────────────────────────────────────── */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* ── Transitions ─────────────────────────────────────────── */
	--transition-base: 200ms ease;
}

/* live mobile header row (#_header_row-1184-10) renders 120px at ≤767 */
@media ( max-width: 767px ) {
	:root {
		--header-height: 120px;
	}
}