/* Base colors */
:root {
  --gray-50: rgb(249 250 251);
  --gray-100: rgb(229 231 235);
  --gray-200: rgb(209 213 219);
  --gray-300: rgb(156 163 175);
  --gray-400: rgb(107 114 128);
  --gray-500: rgb(55 65 81);
  --gray-600: rgb(30 33 36);
  --gray-700: rgb(18 19 20);
  --gray-800: rgb(10 11 12);
  --gray-900: rgb(3 3 3);
  /* Blues - reserved for special use */
  --blue-300: rgb(147 197 253);
  --blue-400: rgb(96 165 250);
  --blue-500: rgb(59 130 246);
  --blue-600: rgb(37 99 235);
  --blue-vivid: rgb(0 112 255); /* New vibrant blue */
  /* Reds - reserved for special use */
  --red-300: rgb(252 165 165);
  --red-400: rgb(248 113 113);
  --red-500: rgb(239 68 68);
  --red-600: rgb(220 38 38);
  --red-vivid: rgb(255 0 0); /* New vibrant red */

  /* Greens - reserved for special use */
  --green-300: rgb(134 239 172);
  --green-400: rgb(74 222 128);
  --green-500: rgb(34 197 94);
  --green-600: rgb(22 163 74);
  --green-vivid: rgb(85 255 75); /* Vibrant green for victories */

  /* Semantic colors */
  --background: var(--gray-900);
  --foreground: var(--gray-100);
  --muted-foreground: var(--gray-400);
  --border: var(--gray-700);
  --border-light: var(--gray-500);
  --input: var(--gray-600);
  --primary: var(--gray-300);
  --primary-foreground: var(--gray-900);
  --secondary: var(--gray-700);
  --secondary-foreground: var(--gray-300);
  --accent: var(--gray-600);
  --accent-foreground: var(--gray-300);
  --ring: var(--gray-400);
  --card: var(--gray-900);
  --popover: var(--gray-800);
  /* Special purpose colors */
  --destructive: var(--red-500);
  --destructive-foreground: var(--gray-50);
  --highlight: var(--blue-400);
  --victory: var(--green-400);
  --defeat: var(--red-400);

  /* Layout */
  --radius: 0.5rem;
}