/* Base color system using CSS variables */
:root {
  /* Base hues */
  --hue-neutral: 195;        /* Neutral/gray colors (195° = teal-gray) */
  --hue-primary: 189;        /* Primary/interactive colors (189° = teal) */
  --hue-success: 152;        /* Success indicators (152° = green) */
  --hue-warning: 39;         /* Warning indicators (39° = amber) */
  --hue-error: 355;          /* Error indicators (355° = red) */
  --hue-info: 189;           /* Info indicators (same as primary) */

  /* Base saturations */
  --sat-neutral: 18%;        /* Subtle saturation for neutral colors */
  --sat-primary: 60%;        /* Moderate saturation for primary buttons/interactive elements */
  --sat-success: 74%;        /* Rich saturation for success indicators */
  --sat-warning: 92%;        /* Bright saturation for warnings */
  --sat-error: 85%;          /* Strong saturation for errors */
  --sat-info: 60%;           /* Clear saturation for info elements */

  /* Base lightness values */
  --light-surface: 100%;     /* Pure white for surfaces */
  --light-page: 97%;         /* Very light for page backgrounds */
  --light-subtle: 93%;       /* Light for subtle backgrounds, borders */
  --light-muted: 75%;        /* Medium for muted text, subtle borders */
  --light-default: 11%;      /* Dark for regular text */
  --light-interactive: 40%;  /* Default interactive elements lightness */
  --light-interactive-hover: 30%; /* Hover state for interactive elements */

  /* Common alpha values */
  --alpha-full: 1;           /* Solid colors */
  --alpha-hover: 0.9;        /* Hover states */
  --alpha-disabled: 0.5;     /* Disabled elements */
  --alpha-overlay: 0.5;      /* Overlays and modals */
}

/* Dark mode variables */
.dark {
  /* Dark mode lightness values (inverted from light mode) */
  --light-surface: 13%;      /* Dark surfaces */
  --light-page: 17%;         /* Dark page backgrounds */
  --light-subtle: 25%;       /* Dark subtle backgrounds, borders */
  --light-muted: 60%;        /* Medium-light for muted text in dark mode */
  --light-default: 93%;      /* Light text for dark backgrounds */
  --light-interactive: 55%;  /* Brighter interactive elements for dark mode */
  --light-interactive-hover: 65%; /* Brighter hover state for dark mode */

  /* Slightly increased saturation for some colors in dark mode */
  --sat-neutral: 22%;        /* Increased saturation for better visibility */
  --sat-primary: 70%;        /* Slightly higher than light mode for better visibility */
}