:root {
  /* Background colors */
  --bg-000: 227 7% 98%;
  --bg-100: 225 7% 95%;
  --bg-200: 222 7% 92%;
  --bg-300: 220 7% 88%;
  --bg-400: 218 7% 82%;
  --bg-500: 216 7% 70%;
  
  /* Text colors */
  --text-000: 220 10% 5%;
  --text-100: 220 8% 15%;
  --text-200: 220 6% 25%;
  --text-300: 220 5% 40%;
  --text-400: 220 4% 55%;
  --text-500: 220 3% 65%;
  
  /* Border colors */
  --border-100: 220 7% 85%;
  --border-200: 220 7% 78%;
  --border-300: 220 7% 68%;
  --border-400: 220 7% 55%;
  
  /* Main accent (Orange/Brown) */
  --accent-main-000: 27 70% 52%;
  --accent-main-100: 27 70% 48%;
  --accent-main-200: 27 70% 44%;
  --accent-main-900: 27 70% 20%;
  
  /* Secondary accent (Blue) */
  --accent-secondary-000: 220 80% 52%;
  --accent-secondary-100: 220 80% 48%;
  --accent-secondary-200: 220 80% 44%;
  --accent-secondary-900: 220 80% 20%;
  
  /* Pro accent (Purple) */
  --accent-pro-000: 270 70% 60%;
  --accent-pro-100: 270 70% 55%;
  --accent-pro-200: 270 70% 50%;
  --accent-pro-900: 270 70% 25%;
  
  /* Brand accent */
  --accent-brand: 27 70% 52%;
  
  /* Status colors - Danger (Red) */
  --danger-000: 0 70% 52%;
  --danger-100: 0 70% 48%;
  --danger-200: 0 70% 44%;
  --danger-900: 0 70% 20%;
  
  /* Status colors - Success (Green) */
  --success-000: 142 70% 45%;
  --success-100: 142 70% 40%;
  --success-200: 142 70% 35%;
  --success-900: 142 70% 20%;
  
  /* Status colors - Warning (Yellow) */
  --warning-000: 45 90% 55%;
  --warning-100: 45 90% 50%;
  --warning-200: 45 90% 45%;
  --warning-900: 45 90% 25%;
  
  /* On-color text (text that appears on colored backgrounds) */
  --oncolor-100: 0 0% 100%;
  --oncolor-200: 0 0% 95%;
  
  /* Always white/black (doesn't change in dark mode) */
  --always-white: 0 0% 100%;
  --always-black: 0 0% 0%;
  
  /* Font families */
  --font-ui: "anthropicSans", "anthropicSans Fallback", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui-serif: "anthropicSerif", "anthropicSerif Fallback", Georgia, "Times New Roman", Times, serif;
  --font-mono: "jetbrains", "jetbrains Fallback", ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
  --font-user-message: var(--font-ui);
  --font-claude-response: var(--font-ui);
}

[data-theme="claude"][data-mode="dark"], 
[data-theme="claude"]:not([data-mode]) {
  color-scheme: dark;
  
  --bg-000: 220 13% 10%;
  --bg-100: 220 13% 13%;
  --bg-200: 220 13% 16%;
  --bg-300: 220 13% 20%;
  --bg-400: 220 13% 24%;
  --bg-500: 220 13% 35%;
  
  --text-000: 220 15% 95%;
  --text-100: 220 13% 85%;
  --text-200: 220 10% 70%;
  --text-300: 220 8% 55%;
  --text-400: 220 6% 40%;
  --text-500: 220 5% 30%;
  
  --border-100: 220 13% 25%;
  --border-200: 220 13% 30%;
  --border-300: 220 13% 35%;
  --border-400: 220 13% 45%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
  background-color: hsl(var(--bg-100));
  color: hsl(var(--text-100));
}