/* ========================================================================================
 * tokens.css - Design tokens for the TMJ International component kit (L1 layer).
 *
 * Palette, semantic aliases, type scale, spacing, shape and shadow custom properties,
 * copied from the design source's :root block (docs/design-source/homepage-template.html,
 * search --cd-ground), light mode only (dark-mode blocks dropped, this site has no
 * dark theme). Do not put selector rules here, tokens only.
 * ======================================================================================== */

/* Figtree variable font, 300-900, SIL OFL. Self-hosted, no external requests. */
@font-face{
	font-family:"Figtree";
	src:url(../fonts/figtree-var.woff2) format("woff2");
	font-weight:300 900;
	font-display:swap;
}

:root{
	/* --- palette: green ---------------------------------- */
	--cd-green-900:#0F2E2A;
	--cd-green-800:#153B37;
	--cd-green-700:#1A4F48;
	--cd-green-50:#EEF5F4;

	/* --- palette: teal ------------------------------------ */
	--cd-teal-700:#2A635C;
	--cd-teal-600:#34766D;
	--cd-teal-500:#3C877F;
	--cd-teal-300:#8FBDB6;
	--cd-teal-200:#C5DDD9;

	/* --- palette: orange ----------------------------------- */
	--cd-orange-700:#A34400;
	--cd-orange-500:#FF8A3D;
	--cd-orange-300:#FFB77E;

	/* --- palette: neutrals (green-biased) ------------------- */
	--cd-slate-700:#33413F;
	--cd-slate-500:#4A5A57;
	--cd-slate-400:#5F706D;
	--cd-slate-200:#DDE5E3;
	--cd-white:#FFFFFF;

	/* --- semantic: light ------------------------------------ */
	--cd-ground:var(--cd-white);
	--cd-ground-tint:var(--cd-green-50);
	--cd-ground-deep:var(--cd-green-800);
	--cd-ground-raised:var(--cd-white);
	--cd-ink-strong:var(--cd-green-800);
	--cd-ink:var(--cd-slate-500);
	--cd-ink-muted:var(--cd-slate-400);
	--cd-ink-accent:var(--cd-orange-500);
	--cd-ink-brand:var(--cd-teal-500);
	--cd-ink-invert:var(--cd-white);
	--cd-ink-invert-muted:#C3D4D1; /* muted body copy on a dark ground (.on-dark p, .cta-band p...); the design source's own dark-mode block defines --cd-ink as this same hex, but tokens.css is light-mode only (see file header), so it is defined directly here instead of only existing as three duplicated literals in component files */
	--cd-accent:var(--cd-orange-500);
	--cd-accent-ink:var(--cd-white);
	--cd-line:var(--cd-slate-200);
	--cd-line-strong:var(--cd-teal-200);
	--cd-focus:var(--cd-teal-600);
	--cd-scrim:linear-gradient(to top,color-mix(in srgb,var(--cd-ground-deeper) 92%,transparent) 0%,color-mix(in srgb,var(--cd-ground-deeper) 72%,transparent) 38%,color-mix(in srgb,var(--cd-ground-deeper) 12%,transparent) 100%);
	--cd-wash:linear-gradient(to bottom,rgb(60 134 126 / .16) 0,rgb(60 134 126 / 0) 19%);

	/* --- type ------------------------------------------------ */
	--cd-font:"Figtree",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
	/* The parent's primitives.css sets h1-h6 to var(--heading-font) and framework.css/custom.css
	   use var(--default-font); the parent's own font handles are dequeued here, so both point at
	   the kit font instead of falling back to the system stack. */
	--heading-font:var(--cd-font);
	--default-font:var(--cd-font);
	--cd-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
	/* every step: clamp(min rem, rem + vw, max rem) against a 16px root */
	--cd-display:clamp(2.25rem,1.433rem + 1.8519vw,2.75rem);     /* 36 -> 44 */
	--cd-h2:clamp(1.875rem,1.433rem + 1.1111vw,2.5rem);           /* 30 -> 40 */
	--cd-h3:clamp(1.375rem,1.25rem + 0.5556vw,1.75rem);           /* 22 -> 28 */
	--cd-h4:clamp(1.125rem,1.0833rem + 0.1852vw,1.25rem);         /* 18 -> 20 */
	--cd-body-lg:clamp(1.0625rem,1.0208rem + 0.1852vw,1.1875rem); /* 17 -> 19 */
	--cd-body:clamp(1rem,0.9792rem + 0.0926vw,1.0625rem);         /* 16 -> 17 */
	--cd-small:clamp(0.8125rem,0.7917rem + 0.0926vw,0.875rem);    /* 13 -> 14 */
	--cd-eyebrow:clamp(0.75rem,0.7292rem + 0.0926vw,0.8125rem);   /* 12 -> 13 */

	/* --- space ------------------------------------------------ */
	--cd-1:4px;  --cd-2:8px;  --cd-3:12px; --cd-4:16px; --cd-5:24px;
	--cd-6:32px; --cd-7:48px; --cd-8:64px; --cd-9:96px; --cd-10:128px;
	--cd-section:clamp(56px,3rem + 5vw,112px);
	/* Deep-green glass: the doctor testimonial cards on a deep section (plugin-skins.css) and
	   .card--glass (card.css) share these, so the two surfaces can never drift apart. */
	--cd-glass-border:color-mix(in srgb,var(--cd-white) 16%,transparent);
	--cd-glass-sheen:linear-gradient(135deg,color-mix(in srgb,var(--cd-white) 8%,transparent),transparent 60%);
	--cd-glass-shadow:0 24px 48px -24px rgb(0 0 0 / .45);
	--cd-container:1400px;
	/* Page side gutter: 24px on phones, growing to 48px on wide screens so content never
	   sits on a thin edge at 1440 (header, sections, hero and footer all use it). */
	--cd-gutter:clamp(var(--cd-5),4vw - 10px,var(--cd-7));
	--cd-measure:68ch;

	/* --- shape ------------------------------------------------ */
	--cd-r-sm:6px; --cd-r-md:12px; --cd-r-lg:20px; --cd-r-pill:999px;
	--cd-shadow-1:0 1px 2px rgb(15 46 42 / .06),0 2px 8px rgb(15 46 42 / .06);
	--cd-shadow-2:0 4px 12px rgb(15 46 42 / .08),0 16px 40px rgb(15 46 42 / .10);
	--cd-ring:0 0 0 3px var(--cd-ground),0 0 0 6px var(--cd-focus);

	color-scheme:light;
}

/* ========================================================================================
 * Brand role mapping: the framework's Theme Colors (Appearance > Theme Colors, option
 * ac_colors, injected as a :root override by the parent's ac_colors_inject() at wp_head
 * priority 100, only for keys that are saved) drive the kit's brand roles, with the
 * design's own hex as the fallback. Roles follow the parent's field meanings
 * (anchor-framework/inc/colors.php ac_color_fields()):
 *
 *   Primary (dark)        --primary-color      -> --cd-ground-deep (header bar, deep sections,
 *                                                  cta bands), --cd-ink-strong (headings), and
 *                                                  --cd-ground-deeper (mega panels, drawer,
 *                                                  footer, photo scrims: Primary darkened 22%)
 *   Header Gradient 2nd   --primary-light      -> --cd-ink-brand (links, .accent, card eyebrows)
 *   Secondary (light bg)  --secondary-color    -> --cd-ground-tint (tint sections, quiet buttons)
 *   Accent / Brand        --accent-color       -> --cd-ink-accent (eyebrows, .btn--link) and
 *                                                  --cd-ink-accent-invert (the same accent lifted
 *                                                  toward white for eyebrows/hovers on dark)
 *   Button / Button Hover --button-color, --button-hover-color -> --cd-accent, --cd-accent-hover
 *
 * inc/colors.php tmj_color_map() holds the same hex values and tools/set-theme-colors.php
 * seeds ac_colors from it, so the saved option reproduces the design exactly and a change
 * in wp-admin re-skins every component that uses these roles.
 * ======================================================================================== */
:root{
	--cd-ground-deep:var(--primary-color, #153B37);
	--cd-ground-deeper:color-mix(in srgb,var(--cd-ground-deep) 78%,#000);
	--cd-ink-strong:var(--cd-ground-deep);
	--cd-ink-brand:var(--primary-light, #1A4F48);
	--cd-ground-tint:var(--secondary-color, #EEF5F4);
	--cd-ink-accent:var(--accent-color, #FF8A3D);
	--cd-ink-accent-invert:color-mix(in srgb,var(--cd-ink-accent) 64%,#fff);
	--cd-accent:var(--button-color, #FF8A3D);
	--cd-accent-hover:var(--button-hover-color, #FFB77E);
	/* Highlight (.accent words, ribbons, pull-quote bars): Theme Colors has no mid-teal field,
	   so it is DERIVED from Header Gradient 2nd (--cd-ink-brand): same hue, lifted to a mid
	   tone so accent words read as distinct from heading ink (Primary). Follows wp-admin
	   changes; the color-mix line is the fallback for browsers without relative colors. */
	--cd-ink-highlight:color-mix(in srgb,var(--cd-ink-brand) 68%,#fff);
}
@supports (color:oklch(from red l c h)){
	:root{--cd-ink-highlight:oklch(from var(--cd-ink-brand) calc(l + .17) calc(c * 1.6) h)}
}