/**
 * River Bend design tokens — DO NOT EDIT BY HAND.
 * Source: frontend/src/styles/tokens.css
 * Regenerate: npm run sync:tokens
 */

:root {
	--color-primary: #1e4620;
	--color-primary-light: #2d6630;
	--color-primary-dark: #143016;
	--color-secondary: #e65c00;
	--color-secondary-light: #ff8533;
	--color-secondary-dark: #b34700;
	--color-accent: #0284c7;
	--color-accent-light: #38bdf8;
	--color-accent-dark: #075985;
	--color-bg-warm: #fcf9f2;
	--color-bg: var(--color-bg-warm);
	--color-bg-alt: var(--color-card-bg);
	--color-card-bg: #f5f0e1;
	--color-text-dark: #202421;
	--color-text: var(--color-text-dark);
	--color-text-muted: #5c6b5e;
	--color-dark: #1a202c;
	--color-text-light: #ffffff;
	--color-gray: #71717a;
	--font-display: 'Fredoka', cursive, system-ui;
	--font-body: 'Lexend', sans-serif;
	--border-radius-sm: 8px;
	--border-radius-md: 16px;
	--border-radius-lg: 24px;
	--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--rb-card-border: 1px solid rgba(30, 70, 32, 0.08);

	--status-ok: #2d6630;
	--status-ok-bg: #e6f0e6;
	--status-watch: #b45309;
	--status-watch-bg: #fef3c7;
	--status-caution: #c2410c;
	--status-caution-bg: #ffedd5;
	--status-danger: #b91c1c;
	--status-danger-bg: #fee2e2;

	--rb-vw-min: 360;
	--rb-vw-max: 1366;

	--text-s: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
	--text-m: clamp(1rem, 0.95rem + 0.23vw, 1.13rem);
	--text-l: clamp(1.2rem, 1.12rem + 0.36vw, 1.41rem);
	--text-xl: clamp(1.44rem, 1.32rem + 0.55vw, 1.76rem);
	--h6: var(--text-m);
	--h5: var(--text-l);
	--h4: var(--text-xl);
	--h3: clamp(1.73rem, 1.55rem + 0.81vw, 2.2rem);
	--h2: clamp(2.07rem, 1.81rem + 1.16vw, 2.75rem);
	--h1: clamp(2.49rem, 2.12rem + 1.65vw, 3.43rem);

	--space-xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
	--space-s: clamp(0.75rem, 0.68rem + 0.31vw, 0.97rem);
	--space-m: clamp(1rem, 0.9rem + 0.45vw, 1.31rem);
	--space-l: clamp(1.5rem, 1.33rem + 0.74vw, 2.03rem);
	--space-xl: clamp(2rem, 1.75rem + 1.1vw, 2.78rem);
	--content-width: 1280px;
	--layout-content-width: var(--content-width);
}

.rb-icon {
	display: inline-block;
	vertical-align: -0.125em;
}