@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Noto+Serif:ital,wght@0,400;0,600;1,400&display=swap");

:root {
	--green-50: #eef5f0;
	--green-100: #d6e7db;
	--green-200: #a9cdb6;
	--green-300: #6fae86;
	--green-400: #2f8b56;
	--green-500: #026327;
	--green-600: #01551f;
	--green-700: #014319;
	--green-800: #012f12;
	--white: #ffffff;
	--grey-25: #fafbfa;
	--grey-50: #f4f5f4;
	--grey-100: #eceeec;
	--grey-200: #dfe2df;
	--grey-300: #c7ccc8;
	--grey-400: #9aa19c;
	--grey-500: #7d837f;
	--grey-600: #6d6e71;
	--grey-700: #4b4d4f;
	--grey-800: #2d2f30;
	--grey-900: #17191a;
	--teal-500: #0b6b6b;
	--sand-500: #a8842c;
	--plum-500: #6b2f52;
	--danger-500: #a32020;
	--danger-50: #fbeeee;
	--success-500: #026327;
	--success-50: #eef5f0;
	--warning-500: #a8842c;
	--warning-50: #faf5e7;
	--info-500: #0b6b6b;
	--info-50: #eaf3f3;
	--brand: var(--green-500);
	--brand-hover: var(--green-600);
	--brand-active: var(--green-700);
	--brand-subtle: var(--green-50);
	--brand-border: var(--green-200);
	--page-bg: var(--grey-50);
	--surface-card: var(--white);
	--text-heading: var(--grey-900);
	--text-body: var(--grey-700);
	--text-muted: var(--grey-500);
	--text-on-brand: var(--white);
	--text-brand: var(--green-500);
	--text-link: var(--green-500);
	--text-link-hover: var(--green-700);
	--border-subtle: var(--grey-200);
	--border-strong: var(--grey-300);
	--font-sans: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--font-serif: "Noto Serif", Georgia, serif;
	--weight-light: 300;
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--text-xs: 12px;
	--text-sm: 14px;
	--text-base: 16px;
	--text-md: 18px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 30px;
	--text-3xl: 38px;
	--text-4xl: 48px;
	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.55;
	--tracking-tight: -0.01em;
	--tracking-caps: 0.12em;
	--type-display: var(--weight-bold) var(--text-4xl) / var(--leading-tight) var(--font-sans);
	--type-h1: var(--weight-bold) var(--text-3xl) / var(--leading-tight) var(--font-sans);
	--type-h2: var(--weight-semibold) var(--text-2xl) / var(--leading-snug) var(--font-sans);
	--type-h3: var(--weight-semibold) var(--text-lg) / var(--leading-snug) var(--font-sans);
	--type-h4: var(--weight-semibold) var(--text-md) / var(--leading-snug) var(--font-sans);
	--type-body: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-sans);
	--type-body-sm: var(--weight-regular) var(--text-sm) / var(--leading-normal) var(--font-sans);
	--type-label: var(--weight-semibold) var(--text-sm) / 1.2 var(--font-sans);
	--type-eyebrow: var(--weight-bold) var(--text-xs) / 1.2 var(--font-sans);
	--radius-xs: 3px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 3px rgba(23, 25, 26, 0.07), 0 1px 2px rgba(23, 25, 26, 0.04);
	--shadow-md: 0 4px 12px rgba(23, 25, 26, 0.08);
	--container-max: 1200px;
	--gutter: 24px;
	--accent-bar-width: 4px;
	--control-h-sm: 34px;
	--control-h-md: 42px;
	--control-h-lg: 50px;
}