:root {
  /* Colours using OKLCH for better perceptual uniformity */
  --color-black: oklch(0% 0 0);
  --color-white: oklch(100% 0 0);
  
  /* Gray scale - consistent lightness progression */
  --color-gray-50: oklch(98.3% 0.002 247);
  --color-gray-100: oklch(96.2% 0.004 247);
  --color-gray-200: oklch(90.0% 0.006 247);
  --color-gray-300: oklch(83.1% 0.008 247);
  --color-gray-400: oklch(69.2% 0.008 247);
  --color-gray-500: oklch(57.2% 0.008 247);
  --color-gray-600: oklch(47.1% 0.009 247);
  --color-gray-700: oklch(37.8% 0.010 247);
  --color-gray-800: oklch(27.1% 0.011 247);
  --color-gray-900: oklch(16.9% 0.012 247);
  
  /* Indigo scale - consistent hue and chroma */
  --color-indigo-300: oklch(76.3% 0.108 264);
  --color-indigo-600: oklch(54.3% 0.227 264);
  --color-indigo-700: oklch(49.1% 0.224 264);
  --color-indigo-800: oklch(44.8% 0.184 264);
  --color-indigo-900: oklch(39.4% 0.158 264);
  
  /* Yellow scale - warm yellows */
  --color-yellow-300: oklch(88.6% 0.162 99);
  --color-yellow-400: oklch(83.3% 0.184 96);
  --color-yellow-600: oklch(64.9% 0.150 88);
  
  /* Teal */
  --color-teal-100: oklch(94.8% 0.050 180);
  
  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* Font sizes with line heights */
  --text-xs: 0.75rem;
  --text-xs-height: 1rem;
  
  --text-sm: 0.875rem;
  --text-sm-height: 1.5rem;
  
  --text-base: 1rem;
  --text-base-height: 1.75rem;
  
  --text-lg: 1.125rem;
  --text-lg-height: 1.75rem;
  
  --text-xl: 1.25rem;
  --text-xl-height: 2rem;
  
  --text-2xl: 1.5rem;
  --text-2xl-height: 2rem;
  
  --text-3xl: 1.875rem;
  --text-3xl-height: 2.5rem;
  
  --text-4xl: 2.25rem;
  --text-4xl-height: 3rem;
  
  --text-5xl: 3rem;
  --text-5xl-height: 3.5rem;
  
  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  
  /* Breakpoints (for reference in comments) */
  /* md: 768px */
  /* lg: 960px */
  /* xl: 1120px */
  
  /* Max widths */
  --max-w-screen-xl: 1280px;
  --max-w-readable: 66ch;
  
  /* Light mode semantic colours */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-code: var(--color-gray-100);
  
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted: var(--color-gray-500);
  --text-code: var(--color-gray-700);
  
  --border-primary: var(--color-gray-200);
  --border-secondary: var(--color-gray-300);
  --border-muted: var(--color-gray-100);
  --border-dark: var(--color-gray-600);
  --border-accent: var(--color-teal-100);
  
  --link-primary: var(--color-indigo-700);
  --link-hover: var(--color-indigo-800);
  --link-border: var(--color-indigo-300);
  --link-border-hover: var(--color-indigo-900);
  --link-visited: var(--color-gray-700);
  --link-visited-border: var(--color-gray-300);
  
  --focus-outline: var(--color-black);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colours */
    --bg-primary: var(--color-gray-800);
    --bg-secondary: var(--color-gray-700);
    --bg-code: var(--color-gray-700);
    
    --text-primary: var(--color-gray-300);
    --text-secondary: var(--color-gray-300);
    --text-muted: var(--color-gray-400);
    --text-code: var(--color-gray-200);
    
    --border-primary: var(--color-gray-700);
    --border-secondary: var(--color-gray-600);
    --border-muted: var(--color-gray-600);
    --border-dark: var(--color-gray-100);
    --border-accent: var(--color-gray-700);
    
    --link-primary: var(--color-yellow-400);
    --link-hover: var(--color-yellow-300);
    --link-border: var(--color-yellow-600);
    --link-border-hover: var(--color-yellow-600);
    --link-visited: var(--color-gray-200);
    --link-visited-border: var(--color-gray-500);
    
    --focus-outline: var(--color-gray-900);
  }
}