:root {
  /* Demo semantic layer */
  --bg-purple: #742e7b;
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --text-primary: #111111;
  --text-secondary: #777777;
  --border-color: #eaeaea;
  --msg-bg: #f4f4f3;
  --pill-hover: #f0f0f0;
  --accent-red: #e63946;
  --accent-green: #10b981;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;

  /* Named color values */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;
  --lch-gray: 96% 0.005 96;
  --lch-gray-dark: 92% 0.005 96;
  --lch-gray-darker: 75% 0.005 96;
  --lch-blue: 54% 0.23 255;
  --lch-blue-light: 95% 0.03 255;
  --lch-blue-dark: 80% 0.08 255;
  --lch-orange: 70% 0.2 44;
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;
  --lch-always-black: 0% 0 0;

  /* Abstractions */
  --color-negative: var(--accent-red);
  --color-positive: var(--accent-green);
  --color-bg: var(--surface);
  --color-message-bg: var(--msg-bg);
  --color-text: var(--text-primary);
  --color-text-reversed: var(--surface);
  --color-link: var(--accent-blue);
  --color-border: var(--border-color);
  --color-border-dark: #dddddd;
  --color-border-darker: #b9b9b9;
  --color-selected: oklch(var(--lch-blue-light));
  --color-selected-dark: oklch(var(--lch-blue-dark));
  --color-alert: oklch(var(--lch-orange));

  /* Redefine named color values for dark mode */
  @media (prefers-color-scheme: dark) {
    --lch-black: 100% 0 0;
    --lch-white: 0% 0 0;
    --lch-gray: 25.2% 0 0;
    --lch-gray-dark: 30.12% 0 0;
    --lch-gray-darker: 44.95% 0 0;
    --lch-blue: 72.25% 0.16 248;
    --lch-blue-light: 28.11% 0.053 248;
    --lch-blue-dark: 42.25% 0.07 248;
    --lch-red: 73.8% 0.184 29.18;
    --lch-green: 75% 0.21 141.89;
  }
}