:root {

/* === 1. Color Palette === */

/* Brand & Accent Tones */

--color-brand-primary: #FFC640; /* Mikado Yellow: For data-viz, graphic elements */

--color-accent-blue: #4079FF; /* Blue Crayola: Ideal for links, buttons */

--color-accent-red: #EF5333; /* Cinnabar: For alerts, emphasis */

/* Neutral Tones (Text) */

--color-text-heading: #222222; /* Eerie Black: For all headings, key metrics */

--color-text-body: #222222; /* Eerie Black: For all body copy */

--color-text-link: var(--color-accent-blue); /* High-contrast blue for links */

--color-text-muted: #777777; /* Min. AA contrast on light BG */

/* Surface Tones (Light Theme) */

--color-bg-page: #e6e6e6; /* Platinum: Main page background */

--color-bg-card: #FFFFFF; /* White: For all content cards, modals */

/* === 2. Typography === */

/* Font Family */

--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",

Roboto, "Helvetica Neue", Arial, sans-serif;

/* Font Weights */

--font-weight-bold: 700;

--font-weight-medium: 500;

--font-weight-normal: 400;

/* Modular Type Scale (Approx.) */

--font-size-h1: 3.5rem;

--font-size-h2: 2rem;

--font-size-metric-lg: 2.5rem;

--font-size-metric-md: 1.5rem;

--font-size-body: 1rem;

--font-size-small: 0.875rem;

/* === 3. Layout & Spacing === */

/* Grid & Container */

--container-max-width: 1280px;

--container-padding: 2rem;

/* Spacing System (Base 1rem = 16px) */

--spacing-sm: 0.5rem;

--spacing-md: 1.5rem;

--spacing-lg: 2rem;

--spacing-xl: 4rem;

/* === 4. Components & Borders === */

/* Borders & Radius (Per your request) */

--border-radius-main: 0.5rem; /* 8px */

--card-border-width: 2px;

--card-border-color: var(--color-bg-page); /* #e6e6e6 */

/* Components */

--card-border-radius: var(--border-radius-main);

--button-border-radius: var(--border-radius-main);

--card-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

/* Navigation */

--nav-link-color: var(--color-text-muted);

--nav-link-hover-color: var(--color-text-link);

--nav-link-text-decoration: none;

}