:root {
	--black: 0, 0%, 0%;
	--white: 0, 0%, 100%;
	--red: 0, 100%, 67%;
	--orange: 25, 95%, 53%;
	--yellow: 45, 93%, 47%;
	--gray: 220, 13%, 46%;
	--green: 142, 71%, 45%;
	--mint: 166, 76%, 37%;
	--teal: 188, 85%, 53%;
	--cyan: 188, 80%, 50%;
	--blue: 212, 100%, 50%;
	--indigo: 231, 48%, 48%;
	--purple: 258, 90%, 66%;
	--pink: 330, 81%, 60%;
	--brown: 28, 34%, 45%;
	
	/* Text Colors */
	--text: 0, 0%, 10%;
	--text-primary: 0, 0%, 10%;
	--text-secondary: 220, 9%, 40%;
	
	/* Background Colors - Light theme */
	--bg: 0, 0%, 98%;                     /* Main background - light gray-white */
	--surface: 0, 0%, 100%;               /* Card/surface background - pure white */
	--accent-bg: 0, 0%, 96%;              /* Accent background - slightly darker for nav */
	
	/* Border Colors */
	--border: 220, 13%, 85%;              /* Light borders - subtle separation */
	
	/* Accent Colors */
	--accent: 217, 91%, 50%;              /* Primary accent - slightly darker blue for contrast */
	--accent-hover: 217, 91%, 45%;        /* Hover state - darker blue */
	--accent-secondary: 231, 48%, 40%;   /* Secondary accent - darker indigo */
	
	/* Logo - Use dark text logo for light theme */
	--logo: url('../images/logos/stickrun_text.png');
	--logo-small: url('../images/icon.png');
}