:root {
  /* ==========================================================================
   SPACING SCALE
   --------------------------------------------------------------------------
   --size-1 to --size-10: Used for margin, padding, gap, width, height, etc.
   ========================================================================== */
  --size-1: 0.25rem;
  --size-2: 0.5rem;
  --size-3: 0.75rem;
  --size-4: 0.875rem;;
  --size-5: 1rem;
  --size-6: 1.25rem;
  --size-7: 1.5rem;
  --size-8: 1.75rem;
  --size-9: 2rem;
  --size-10: 2.5rem;

  /* Border Radius Scale: Use for rounding corners on UI elements */
  --border-radius-0: 0;
  --border-radius-1: 2px;
  --border-radius-2: 4px;
  --border-radius-3: 8px;

  /* Valdiation Colors: Use for feedback (success, warning, info, error) backgrounds, icons and text */
  
  --incomplete: #08838f;
  --success: #1c892d;
  --warning: #ffb200;
  --information: #017dbb;
  --error: #d64040;
}

/* ==========================================================================
   COLORS - LIGHT THEME (Default)
   ========================================================================== */

:root {
  color-scheme: light; /* Set the main theme */
  
  --active: #1571CD; /* Primary action color for buttons, links, highlights */
  --active-on-selected: #146EC8; /* Use when active is foreground color and selected is background color */
  --active-primary: #1571CD; /* Passes contrast ratios for white text on active background */
  --background: #fff; /* Main background color for surfaces */
  --text-color: #494949;  /* Default text color */
  --gray-1: #f9f9f9; /* 98 lightness */
  --gray-2: #f5f5f5; /* 96 lightness */
  --gray-3: #f0f0f0; /* 94 lightness */
  --gray-4: #e6e6e6; /* 90 lightness */
  --gray-5: #d9d9d9; /* 85 lightness */
  --gray-6: #ccc; /* 80 lightness */
  --gray-7: #999; /* 60 lightness */
  --gray-8: #676767; /* 40 lightness */
  --gray-9: #333; /* 20 lightness */
  --gray-10: #1a1a1a; /* 10 lightness */

  /* Border Colors - use when an element needs a border, example table cells */
  --border-1: #e6e6e6;
  --border-2: #d9d9d9;

  /* Validation Colors - use for feedback (success, warning, info, error) backgrounds and text */
  --success-bg: #e5f8e8;
  --success-color-text: #00802f;
  --warning-bg: #fffbe6;
  --warning-color-text: #a36200;
  --information-bg: #e8f3ff;
  --information-color-text: #006ec2;
  --error-bg: #fceceb;
  --error-color-text: #ae3d3d;
  --incomplete-bg: #e3fcfe;
  --incomplete-color-text: #087e89;
}

/* ==========================================================================
   COLORS - DARK THEME
   ========================================================================== */

body.dark-theme {
  color-scheme: dark; /* Set the main theme */

  --active: #2085EB; /* Primary action color for buttons, links, highlights */
  --active-on-selected: #61A9F2; /* Use when active is foreground color and selected is background color */
  --active-primary: color-mix(in srgb, var(--active), black 15%); /* Contrast white text on primary button */
  --background: #000; /* Main background color for surfaces */
  --text-color: #eee; /* Default text color */
  --gray-1: #0A0A0A;
  --gray-2: #0F0F0F;
  --gray-3: #141414;
  --gray-4: #1a1a1a;
  --gray-5: #262626;
  --gray-6: #333;
  --gray-7: #666;
  --gray-8: #999;
  --gray-9: #ccc;
  --gray-10: #fff;

  /* Border Colors - use when an element needs a border, example table cells */
  --border-1: #262626;
  --border-2: #333;

  /* Validation Colors - use for feedback (success, warning, info, error) backgrounds and text */
  --success-bg: #2C4030;
  --success-color-text: #51DE67;
  --warning-bg: #413724;
  --warning-color-text: #FFCC2C;
  --information-bg: #223C54;
  --information-color-text: #7BBBF5;
  --error-bg: #4B2A29;
  --error-color-text: #F49590;
  --incomplete-bg: #054a50;
  --incomplete-color-text: #0cc0d2;
}