/*
 * tokens.css
 * RIS design tokens: color, type, spacing, elevation.
 * Naming: --{semantic} is the background color, --{semantic}-foreground the text color.
 */

:root {
	/* ---- Radius ---- */
	--radius: 0.825rem;

	/* ---- Global Surfaces ---- */
	--background: #fafbfd;
	--page-background: #1d2939;
	--foreground: #1d2939;

	/* ---- Card ---- */
	--card: #ffffff;
	--card-foreground: #1d2939;

	/* ---- Popover / Dropdown ---- */
	--popover: #ffffff;
	--popover-foreground: #1d2939;

	/* ---- Primary (RIS purple accent) ---- */
	--primary: #6366a8;
	--primary-foreground: #ffffff;

	/* ---- Secondary ---- */
	--secondary: #f3f5fa;
	--secondary-foreground: #1d2939;

	/* ---- Muted ---- */
	--muted: #f3f5fa;
	--muted-foreground: #555f73;

	/* ---- Accent ---- */
	--accent: #eef0ff;
	--accent-foreground: #3b3f8c;

	/* ---- Destructive ---- */
	--destructive: #e87878;
	--destructive-foreground: #ffffff;

	/* ---- Borders & Inputs ---- */
	--border: #d6e4f98a;
	--input: #d0d5dd;
	--ring: #6366a8;

	/* ---- Sidebar (mirrors existing dark sidebar) ---- */
	--sidebar: #1d2939;
	--sidebar-foreground: #c4cbdc;
	--sidebar-primary: #6366a8;
	--sidebar-primary-foreground: #ffffff;
	--sidebar-accent: #2d3a4d;
	--sidebar-accent-foreground: #ffffff;
	--sidebar-border: #4d5163;
	--sidebar-muted: #909aaa;

	/* ---- Chart Palette ---- */
	--chart-1: #6366a8;
	--chart-2: #56bdde;
	--chart-3: #6dc7be;
	--chart-4: #e8a44a;
	--chart-5: #c18ad8;

	/* ---- Shadows ---- */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* ---- Layout ---- */
	--layout-content-max: 1280px;
	--layout-sidebar-width: 315px;
	--layout-page-max: calc(var(--layout-sidebar-width) + var(--layout-content-max));

	/* ---- Responsive Breakpoints ────────────────────────
	   NOTE: CSS custom properties cannot be used in @media rules.
	   These values are documented here for reference — use the
	   actual px values in @media queries directly:
	       @media (max-width: 1024px) { ... }
	       @media (min-width: 1025px) { ... }
	   ── bp-sm: 640px   (small phones)
	   ── bp-md: 768px   (tablets portrait)
	   ── bp-lg: 1024px  (tablets landscape / small laptops)
	   ── bp-xl: 1280px  (desktops)
	*/

	/* ---- Typography ---- */
	--font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-display: "Bitter", Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", monospace;

	/* ---- Spacing Scale ---- */
	--space-0: 0;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;

	/* ---- Section Accent Colors ---- */
	--section-about: #8ab88a;
	--section-about-light: #a8d4a8;
	--section-about-bg: #f3fff6;
	--section-about-bg-alt: #e9f9ed;
	--section-housing: #c18ad8;
	--section-housing-light: #d09de5;
	--section-socioeconomic: #6366a8;
	--section-ag: #6dc7be;
	--section-broadband: #56bdde;
	--section-broadband-light: #6acded;
	--section-fiscal: #e8a44a;

	/* ---- Neutral Grays ---- */
	--gray-50: #f8f9fb;
	--gray-100: #f3f5fa;
	--gray-200: #e2e8f0;
	--gray-300: #d6e4f98a;
	--gray-400: #aab3bd;
	--gray-400-foreground: #697787;
	--gray-500: #74819a;
	--gray-600: #646e78;
	--gray-700: #4d5b6f;
	--gray-800: #2d3a4d;
	--gray-900: #1d2939;

	/* ---- Text Colors ---- */
	--text-primary: #1d2939;
	--text-secondary: #6a778c;
	--text-muted: #74819a;
	--text-light: #657791;
	--text-inverse: #ffffff;
	--text-inverse-muted: rgba(255, 255, 255, 0.75);
	--text-inverse-subtle: rgba(255, 255, 255, 0.5);

	/* ---- Border Colors ---- */
	--border-default: #d6e4f98a;
	--border-light: #e2e8f0;
	--border-dark: #4d5b6f;
	--border-accent: #c9d2dc;
	--border-muted: #bcc5cf;

	/* ---- Transition ---- */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ---- Entrance Animation ---- */
	--stagger-duration: 280ms;
	--stagger-delay-step: 60ms;
	--stagger-delay-cap: 420ms;
	--stagger-easing: cubic-bezier(0.34, 1.4, 0.64, 1);
	--stagger-translate-y: 6px;
	--stagger-translate-y-lg: 10px;
}