:root {
  /* Light mode colors (default) */
  --color-background: #F4F3F0;
  --color-text-primary: #1817A4;
  --color-text-low: #8988CF;
  --color-primary: #1817A4;
  --color-border: #E5E5E5;
  --color-hover: #F5F5F5;
  --color-shadow: rgba(149, 157, 165, 0.20);
  --color-nav-active-bg: #1717a411;

  /* Typography - Fluid scaling */
  --font-family-base: 'Switzer', 'Inter', sans-serif;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* Spacing System */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 128px;

  /* Breakpoints */
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1440px;
}

/* Dark mode colors */
[data-theme="dark"] {
  --color-background: #000023;
  --color-text-primary: #f6efda;
  --color-text-low: #ffffffb5;
  --color-primary: #f6efda;
  --color-border: #333333;
  --color-hover: #2A2A2A;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-nav-active-bg: rgba(245, 232, 194, 0.18);
}

/* Default font sizes */
:root {
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 24px;
  --font-size-xl: 48px;
  --font-size-ss: 30px;
}

/* Small font size */
[data-font-size="s"] {
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 20px;
  --font-size-xl: 50px;
  --font-size-ss: 26px;
}

/* Large font size */
[data-font-size="l"] {
  --font-size-s: 16px;
  --font-size-m: 18px;
  --font-size-l: 28px;
  --font-size-xl: 50px;
  --font-size-ss: 34px;
}