/* The bundle's greys onto the 2026 brand. Ground is Sand, not Paper:
   --primary is text and measures 3.42:1 on Sand, 2.88:1 on Paper. Why the
   Accent fill, and why every rule below: test-b26-ic-brand.php. */
html #root {
	--background: 25.7 28% 95.1%;
	--foreground: 0 10.2% 19.2%;
	--card: 0 0% 98.4%;
	--card-foreground: 0 10.2% 19.2%;
	--popover: 0 0% 98.4%;
	--popover-foreground: 0 10.2% 19.2%;
	--primary: 0 94.3% 58.4%;
	--primary-foreground: 0 0% 98.4%;
	--secondary: 23.3 29% 87.8%;
	--secondary-foreground: 0 10.2% 19.2%;
	--muted: 23.3 29% 87.8%;
	--muted-foreground: 24 12% 38%;
	--accent: 23.3 29% 87.8%;
	--accent-foreground: 0 10.2% 19.2%;
	--border: 24 20% 78%;
	--input: 24 20% 78%;
	--destructive: 0 94.3% 58.4%;
	--ring: 0 94.3% 58.4%;
	--tlycs-red: 0 94.3% 58.4%;
	--tlycs-red-light: 23.3 29% 87.8%;
	--tlycs-black: 0 10.2% 19.2%;
	--tlycs-dark-gray: 0 10.2% 19.2%;
}

/* Chip label. */
#root .bg-tlycs-dark-gray.text-primary-foreground {
	color: var(--b26-white) !important;
}

/* Type ON the Accent fill, and the masked icon inside it. */
#root .bg-primary.text-primary-foreground,
#root .bg-primary .text-primary-foreground {
	color: var(--b26-ink) !important;
}

/* The hero eyebrow only - .text-xs is the one on the dark band. */
#root .tracking-eyebrow.text-sm.text-primary {
	color: var(--b26-white) !important;
}

/* The ACCENT keeps the token; only the donate anchor below takes the
   designer's literal. Why the split: test-b26-ic-brand.php. */
#root .bg-primary {
	background-color: var(--b26-yellow) !important;
}

/* Donate Now only, not the accent: test-b26-donate-button-signatures.php. */
#root a.bg-primary.tracking-button {
	background-color: #FFB300 !important;
	letter-spacing: 0.5px !important;
}

#root .hover\:bg-primary:hover,
#root .hover\:bg-primary\/90:hover,
#root .focus\:bg-primary:focus {
	background-color: color-mix(in srgb, var(--b26-yellow) 86%, var(--b26-ink)) !important;
}

/* Unselected charity card, hovered. */
#root .hover\:border-muted-foreground\/30:hover {
	background-color: var(--b26-sand) !important;
}

/* The bundle asks for mt-6 and Tailwind never compiled it. */
#root .mt-6 {
	margin-top: 18px;
}


/* Controls take the site's corner, 10px. The round icon badge in the result
   band is a div and is deliberately not named here. Why, and the counts behind
   it: test-b26-ic-brand.php, "the calculator's corners". */
#root button.rounded-full,
#root a.rounded-full,
#root input.rounded-full {
	border-radius: var(--b26-radius-md) !important;
}