/* WeighWeekly design tokens. Served at /assets/tokens.css and linked from every page
   before that page's own CSS, so page rules can read the variables. The rules that
   apply them live in site/partials/brand-style.html, which goes last in <head>. */

:root {
	--ww-navy: #14304F;        /* headings, nav, outline buttons, toggle active */
	--ww-navy-solid: #14304F;  /* navy used as a fill, with white on top */
	--ww-coral: #E4572E;       /* the one primary button per screen, "cheapest" badge, highlighted price */
	--ww-coral-dark: #C4471F;  /* primary button hover */
	--ww-coral-tint: #FDF0EB;
	--ww-green: #2E7D5B;       /* the trust-line check marks, nothing else */
	--ww-green-tint: #EAF5EF;
	/* Price ticker (on the navy fill, both themes): a price rise, a fall, no change. The one other place green is used. */
	--ww-tick-up: #6EE7A8;
	--ww-tick-down: #FF9B8F;
	--ww-tick-flat: #B4C3D6;
	--ww-bg: #F5F7FA;          /* page background */
	--ww-surface: #FFFFFF;     /* cards, header */
	--ww-ink: #1B2430;
	--ww-ink-2: #4B5563;
	--ww-ink-3: #7A8595;
	--ww-line: #DDE3EA;        /* every border */
	--ww-navy-tint: #DEEAF6;   /* soft blue panels: notes, stat boxes, the trial band (the old pages' --teal-soft) */
	--ww-warn: #8A5A1E;        /* warning text (the old pages' --warn) */
	--ww-on-fill: #FFFFFF;     /* text on a navy or coral fill */
	--ww-serif: "Fraunces", Georgia, serif;
	--ww-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
	--ww-r-md: 10px;
	--ww-r-lg: 16px;
	--ww-max: 640px;
	--ww-shadow: 0 1px 2px rgba(20, 48, 79, .06);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ww-navy: #C6D8EC;      /* navy as ink and as a border has to lighten to stay legible */
		--ww-navy-solid: #1E4670;
		--ww-coral: #F0704A;
		--ww-coral-dark: #E4572E;
		--ww-coral-tint: #3A2118;
		--ww-green: #5FBF8E;
		--ww-green-tint: #16301F;
		--ww-bg: #0F1720;
		--ww-surface: #182230;
		--ww-ink: #EEF2F6;
		--ww-ink-2: #C3CCD8;
		--ww-ink-3: #93A0B0;
		--ww-line: #2A3644;
		--ww-navy-tint: #1A2B40;
		--ww-warn: #E2B37A;
		--ww-shadow: 0 1px 2px rgba(0, 0, 0, .4);
		color-scheme: dark;
	}
}