:root {
  /* Named color values */
  --lch-black: 33.98% 0.0553 185.81;       /* Forest */
  --lch-white: 99.7% 0.003 95;             /* Very slight cream */
  --lch-gray: 93.50% 0.0150 98.00;         /* Sand (lighter) */
  --lch-gray-dark: 90.00% 0.0170 98.00;    /* Sand (dark, lighter) */
  --lch-gray-darker: 90.50% 0.0160 98.00;  /* Sand (darker, lighter) */
  --lch-blue: 33.98% 0.0553 185.81;        /* Forest (links) */
  --lch-blue-light: 92.54% 0.0620 212.73;  /* Cyan */
  --lch-blue-dark: 88.50% 0.0577 291.73;   /* Lavender */
  --lch-orange: 78.60% 0.0660 68.15;       /* Dusty orange */
  --lch-red: 67.93% 0.1237 34.58;          /* Dusty red */
  --lch-green: 80.56% 0.0480 152.82;       /* Sage */
  --lch-always-black: 0% 0 0;

  /* Abstractions */
  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-green));
  --color-bg: oklch(var(--lch-white));
  --color-message-bg: oklch(var(--lch-gray));
  --color-text: oklch(var(--lch-black));
  --color-text-reversed: oklch(var(--lch-white));
  --color-link: oklch(var(--lch-blue));
  --color-border: oklch(var(--lch-gray));
  --color-border-dark: oklch(var(--lch-gray-dark));
  --color-border-darker: oklch(var(--lch-gray-darker));
  --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: 97.15% 0.0468 104.62;     /* Cream */
    --lch-white: 19.29% 0.0241 180.95;     /* Deeper forest */
    --lch-gray: 28.55% 0.0354 180.58;      /* Dark green */
    --lch-gray-dark: 25.24% 0.0302 181.13; /* Darker green */
    --lch-gray-darker: 21.77% 0.0258 182.40; /* Darkest green */
    --lch-blue: 97.15% 0.0468 104.62;      /* Cream (links) */
    --lch-blue-light: 88.09% 0.0315 94.92; /* Sand */
    --lch-blue-dark: 88.50% 0.0577 291.73; /* Lavender */
    --lch-orange: 65.86% 0.0681 63.12;     /* Dusty orange (dark) */
    --lch-red: 58.89% 0.1069 35.14;        /* Dusty red (dark) */
    --lch-green: 68.20% 0.0520 156.71;     /* Sage (dark) */
  }
}