/*
Base stylesheet
- Purpose: Define design tokens (CSS variables), minimal resets, and global typography.
- Usage: Loaded before all other styles so variables are available everywhere.
- Do not place component/layout rules here; keep those in layout.css or style.css.
*/
/* DUPLICATE: variables moved to base.css from style.css (keep until verified) */
:root {
	/* Color Palette */
	--color-bg-primary: #0f0f0f;
	--color-bg-secondary: #1a1a1a;
	--color-bg-tertiary: #2a2a2a;
	--color-text-primary: #f0f0f0;
	--color-text-secondary: #9a9a9a;
	--color-text-tertiary: #666666;
	--color-border: #303030;
	/* Theme Colors */
	--color-amber: #f4b223;
	--color-amethyst: #7c4182;
	--color-emerald: #329044;
	--color-ruby: #d50037;
	--color-sapphire: #0093c9;
	--color-steel: #97a3ae;
	--color-accent-primary: #00B337;
	--color-accent-secondary: #e4007c;
	/* Tier Colors */
	--color-high: 67, 181, 129;
	--color-high-solid: rgb(var(--color-high));
	--color-high-bg: rgba(var(--color-high), 0.08);
	--color-mid: 250, 166, 26;
	--color-mid-solid: rgb(var(--color-mid));
	--color-mid-bg: rgba(var(--color-mid), 0.08);
	--color-low: 240, 71, 71;
	--color-low-solid: rgb(var(--color-low));
	--color-low-bg: rgba(var(--color-low), 0.08);
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	/* Fonts */
	--font-xs: 0.85rem;
	--font-sm: 1rem;
	--font-md: 1.15rem;
	--font-lg: 1.5rem;
	--font-xl: 2rem;
	/* Z-Index */
	--z-modal: 2000;
	--z-sidebar: 100;
	--z-loading: 1000;
	--z-mobile-nav: 999;
	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
	--shadow-lg: 0 8px 32px rgba(0,0,0,0.25);
	/* Mobile */
	--mobile-nav-height: 70px;
	--mobile-header-height: 68px;
}

html, body {
	margin: 0;
	padding: 0;
}