/*
 * Tri-Lakes Family Care: design tokens.
 *
 * Every colour, spacing step and radius the theme uses is declared here, on :root, and nowhere else.
 * No hex value may appear outside this block (style.css and the templates use var(--...) only).
 *
 * Names: SPEC.md "Implementation notes", note 2 (--navy, --green, --green-deep, --green-light, --tint,
 * --navy-tint, --ground, --line, --rule, --ink, --body, --cap), plus the remaining rows of the SPEC
 * "Color tokens" table under their table names. design/home-responsive.html uses literal hex values, so
 * it supplies the class names but no variable names.
 */

:root {
	/* ---- SPEC Color tokens ------------------------------------------------------------------ */
	--navy: #0a304a;              /* headings, body links, dark fills, footer, ribbon */
	--green: #85a83e;             /* brand green: kickers on navy, open dot, active-nav underline. Never a fill under text */
	--green-deep: #55702a;        /* green text on light, every green pill (white text), focus ring */
	--green-light: #c5d39a;       /* decorative squares in the town strip; never text */
	--tint: #eaf0dc;              /* "green-tint": Visiting card, virtual-visits band, hero hill */
	--navy-tint: #e4ebf1;         /* map placeholder only */
	--charcoal: #1e303e;          /* pricing bands */
	--ink: #3c4b58;               /* body copy on light backgrounds */
	--body: var(--ink);           /* SPEC note 2 lists --body beside --ink; it is the same body-copy colour */
	--cap: #5b6470;               /* "caption": captions, secondary labels, breadcrumb links */
	--ground: #f5f6f7;            /* page background */
	--white: #ffffff;             /* cards, header, alternating sections */
	--line: #dfe4e8;              /* card borders, sticky-bar top line */
	--rule: #d5dbe1;              /* row dividers in lists and FAQs */
	--on-navy-body: #dbe3ea;      /* body copy on navy */
	--on-navy-muted: #b9c6d1;     /* captions on navy, footer secondary text, breadcrumb separator */
	--on-charcoal-body: #cfd8e0;  /* body copy on charcoal and navy cards */
	--navy-6: rgba(255, 255, 255, 0.06);    /* card fill on charcoal / navy; outline-on-navy hover fill */
	--navy-line: rgba(255, 255, 255, 0.14); /* card border and dividers on charcoal / navy; footer rule */
	--on-navy-rule: rgba(255, 255, 255, 0.18); /* the rule above "Before you come" in the navy Near-you panel */
	--navy-40: rgba(10, 48, 74, 0.4);         /* card border on hover (SPEC States: line to navy at 40%) */

	/* ---- Values drawn in the artboards that the SPEC names in prose, not in the table ---------- */
	--header-line: #e3e7eb;                    /* header hairline, interior-hero bottom border */
	--closed: #c9d2da;                         /* closed-status dot (SPEC States); form field border */
	--error: #9a3b3b;                          /* inline form errors, the "not for" X */
	--shadow-header: 0 4px 16px rgba(10, 48, 74, 0.12); /* header and floating-button shadow: navy at 12% */
	--navy-a06: rgba(10, 48, 74, 0.06);        /* outline-button hover: 6% of its navy text */
	--scrim: rgba(10, 48, 74, 0.5);            /* behind the menu panel on tablets */
	--on-navy-outline: rgba(255, 255, 255, 0.55); /* 2px outline button border on navy */
	--on-navy-pill: rgba(255, 255, 255, 0.35);    /* social pill border on navy */
	/* Text halo on the topographic texture (owner ruling 2026-10-09): layered navy glows that hide a
	   contour line for a few pixels around each letter. Invisible on plain navy. Used by style.css,
	   "Text on the topographic texture". */
	--placeholder-line: var(--on-navy-muted); /* SPEC Photo placeholder: dashed 2px #b9c6d1 on ground */
	--field-line: var(--closed);               /* the light social pill border (drawn #c9d2da) */
	--field-border: #788d9b;                   /* form field border: navy at 55% on white, 3.45:1 (owner ruling
	                                              2026-10-09, WCAG 1.4.11); the drawn #c9d2da was 1.53:1 */
	--halo-navy:
		1px 0 0 var(--navy), -1px 0 0 var(--navy), 0 1px 0 var(--navy), 0 -1px 0 var(--navy),
		1px 1px 0 var(--navy), -1px -1px 0 var(--navy), 1px -1px 0 var(--navy), -1px 1px 0 var(--navy),
		2px 0 0 var(--navy), -2px 0 0 var(--navy), 0 2px 0 var(--navy), 0 -2px 0 var(--navy),
		2px 2px 0 var(--navy), -2px -2px 0 var(--navy), 2px -2px 0 var(--navy), -2px 2px 0 var(--navy),
		3px 0 0 var(--navy), -3px 0 0 var(--navy), 0 3px 0 var(--navy), 0 -3px 0 var(--navy),
		2px 3px 1px var(--navy), -2px -3px 1px var(--navy), 2px -3px 1px var(--navy), -2px 3px 1px var(--navy),
		3px 2px 1px var(--navy), -3px -2px 1px var(--navy), 3px -2px 1px var(--navy), -3px 2px 1px var(--navy),
		0 0 5px var(--navy);

	/* ---- Typography ---------------------------------------------------------------------------- */
	--font-serif: Merriweather, Georgia, serif;
	--font-sans: "Merriweather Sans", "Segoe UI", Tahoma, sans-serif;

	/* ---- Spacing scale (SPEC "Spacing, radii, and grid") ---------------------------------------- */
	--gutter: 64px;               /* page gutter: 64 desktop, 48 at 1024 to 1439 (and the tablet range), 20 phone */
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-14: 14px;
	--space-16: 16px;
	--space-20: 20px;
	--space-22: 22px;
	--space-24: 24px;
	--space-28: 28px;
	--space-32: 32px;
	--space-36: 36px;
	--space-40: 40px;
	--space-48: 48px;
	--space-64: 64px;
	--space-72: 72px;
	--space-80: 80px;
	--space-88: 88px;
	--space-96: 96px;
	--section-top: 96px;          /* section padding: 96 / 88 desktop, 80 / 72 at 1024 to 1439, 40 / 40 phone */
	--section-bottom: 88px;
	--section-gap: 40px;          /* section header to content: 40 desktop, 16 phone */
	--grid-gap: 24px;             /* card grid gap: 24 desktop, 12 phone */
	--card-pad: 28px;             /* card padding: 28 desktop, 20 phone */

	/* ---- Radii --------------------------------------------------------------------------------- */
	--radius-pill: 999px;         /* buttons, chips, social pills */
	--radius-card: 20px;          /* cards (18 on phone) */
	--radius-card-lg: 24px;       /* Find-us and Visiting cards */
	--radius-card-phone: 18px;
	--radius-tile: 18px;          /* price tiles (14 on phone) */
	--radius-tile-phone: 14px;
	--radius-field: 10px;         /* form fields */
	--radius-chip: 12px;          /* before-you-come tiles on Contact */
	--radius-portrait: 28px;      /* the provider page's hero portrait (docs/content-model.md Part IV 58) */

	/* ---- Fixed component sizes ------------------------------------------------------------------ */
	--ribbon-h: 44px;
	--header-h: 96px;
	--sticky-h: 64px;
}

@media (max-width: 1439px) {
	:root {
		--gutter: 48px;
		--section-top: 80px;
		--section-bottom: 72px;
	}
}

@media (max-width: 767px) {
	:root {
		--gutter: 20px;
		--section-top: 40px;
		--section-bottom: 40px;
		--section-gap: 16px;
		--grid-gap: 12px;
		--card-pad: 20px;
		--radius-card: 18px;
		--ribbon-h: 40px;
		--header-h: 64px;
	}
}