:root {
  --color-accent: rgb(147, 51, 234);
  --color-accent-light: rgb(196, 121, 255);
  --color-accent-dark: rgb(109, 40, 176);
  
  --color-background-page: rgb(15, 23, 42);
  --color-background-header: rgb(30, 41, 59);
  --color-background-card: rgb(51, 65, 85);
  --color-background-nav: rgb(30, 41, 59);
  
  --color-text: rgb(226, 232, 240);
  --color-text-muted: rgb(148, 163, 184);
  --color-text-header: rgb(241, 245, 249);
  
  --color-link: var(--color-accent-light);
  --color-link-hover: var(--color-accent);
  --color-link-visited: rgb(168, 85, 247);
  
  --color-border: rgb(71, 85, 105);
  --color-border-accent: var(--color-accent);
  
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  --page-max-width: 1200px;
  --header-height: 80px;
  --sidebar-width: 250px;
  --card-padding: var(--spacing-lg);
  --section-gap: var(--spacing-xl);
  
  --grid-columns: 12;
  --grid-gap: var(--spacing-lg);
  
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

html.light-mode {
  --color-accent: rgb(109, 40, 176);
  --color-accent-light: rgb(147, 51, 234);
  --color-accent-dark: rgb(88, 28, 135);
  
  --color-background-page: rgb(248, 250, 252);
  --color-background-header: rgb(241, 245, 249);
  --color-background-card: rgb(255, 255, 255);
  --color-background-nav: rgb(241, 245, 249);
  
  --color-text: rgb(15, 23, 42);
  --color-text-muted: rgb(71, 85, 105);
  --color-text-header: rgb(15, 23, 42);
  
  --color-link: rgb(109, 40, 176);
  --color-link-hover: rgb(147, 51, 234);
  --color-link-visited: rgb(126, 34, 206);
  
  --color-border: rgb(203, 213, 225);
  --color-border-accent: var(--color-accent);
}