/**
 * TabsWire brand color system — single source of truth.
 *
 * Green brand derived from #35c16f (hue 152.8), with hue-tinted neutrals and a
 * deliberately small support palette (amber = deals, red = warnings/cons,
 * blue = info, gold = star ratings). Components reference the semantic tokens
 * (--action, --text, --muted, ...) rather than raw hex.
 *
 * WCAG guardrail: saturated brand-500 (#35c16f) only carries DARK text.
 * The money button fill is brand-700 (#078143) with white text = 4.96:1 AA.
 */
:root {
	/* Brand ramp (hue 152.8, perceptually even) */
	--brand-50: #edfcf0;
	--brand-100: #d6f7de;
	--brand-200: #b1efc2;
	--brand-300: #87e2a2;
	--brand-400: #59d285;
	--brand-500: #35c16f; /* the literal brand hex */
	--brand-600: #0ea457;
	--brand-700: #078143;
	--brand-800: #096333;
	--brand-900: #0a4d28;
	--brand-950: #062e17;

	/* Neutrals — green-tinted greys (chroma ~0.01) */
	--n-0: #ffffff;
	--n-50: #f8fbf9;
	--n-100: #f0f4f0;
	--n-200: #e1e7e3;
	--n-300: #cfd5d1;
	--n-400: #9ea5a0;
	--n-500: #7d847f;
	--n-600: #626963;
	--n-700: #4b514c;
	--n-800: #343935;
	--n-900: #212622;
	--n-950: #111512;

	/* Support — deals/urgency (amber) */
	--amber-50: #fff4e1;
	--amber-100: #ffe7b9;
	--amber-500: #f5a91f;
	--amber-600: #d58e00;
	--amber-700: #a16800;
	--amber-900: #633f00;

	/* Support — warnings/cons/expiring (red) */
	--red-50: #fff0ed;
	--red-100: #ffddd8;
	--red-500: #f13734;
	--red-600: #d92225;
	--red-700: #b7191c;
	--red-900: #761615;

	/* Support — verified/info (blue, never actions) */
	--blue-50: #edf7ff;
	--blue-100: #d8eeff;
	--blue-500: #0089ed;
	--blue-600: #006fd4;
	--blue-700: #0061b9;
	--blue-900: #003e76;

	/* Rating stars (gold) */
	--gold: #bb8800;
	--gold-fill: #ebb427;

	/* Semantic tokens — reference these in components */
	--action: var(--brand-700);        /* CTA fill / links — white text 4.96:1 AA */
	--action-hover: var(--brand-800);
	--action-active: var(--brand-900);
	--action-tint: var(--brand-50);    /* pros box, winning row */
	--accent: var(--brand-500);        /* fills paired with DARK text only */
	--on-accent: var(--brand-950);     /* 6.39:1 on brand-500 */

	--text: var(--n-800);              /* body copy · 11.78:1 */
	--heading: var(--n-900);           /* headings · 15.38:1 */
	--muted: var(--n-600);             /* bylines, captions · 5.64:1 */
	--border: var(--n-200);
	--surface: var(--n-0);
	--surface-alt: var(--n-50);
	--focus: var(--brand-600);         /* 3px focus ring · 3.25:1 non-text AA */

	--deal: var(--amber-500);
	--on-deal: var(--n-950);           /* 9.28:1 */
	--urgent: var(--red-600);
	--on-urgent: #ffffff;              /* 4.99:1 */
	--info: var(--blue-600);
	--on-info: #ffffff;                /* 4.97:1 */
	--star: var(--gold);
}