:root {
  /* Octo Garden — Botanical Celadon & Warm Editorial Paper (light + dark) */
  --lch-black: 23.5% 0.014 150;
  --lch-white: 95.6% 0.01 80;
  --lch-gray: 92.8% 0.018 145;
  --lch-gray-dark: 86.5% 0.022 145;
  --lch-gray-darker: 62% 0.025 145;
  --lch-blue: 43% 0.085 156;
  --lch-blue-light: 89.5% 0.038 145;
  --lch-blue-dark: 56% 0.075 148;
  --lch-orange: 64% 0.16 48;
  --lch-red: 49% 0.175 28;
  --lch-green: 52% 0.13 148;
  --lch-always-black: 15% 0.01 150;

  /* 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-dark));
  --color-border-dark: oklch(81% 0.024 145);
  --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));

  --garden-card: #faf8f4;
  --garden-me-bg: #cfe2cd;
  --garden-me-border: rgba(27, 33, 29, 0.22);
  --garden-hairline: rgba(27, 33, 29, 0.16);
  --garden-hairline-strong: rgba(27, 33, 29, 0.30);

  @media (prefers-color-scheme: dark) {
    --lch-black: 92.8% 0.012 85;
    --lch-white: 19.5% 0.012 150;
    --lch-gray: 24.8% 0.016 150;
    --lch-gray-dark: 30.5% 0.02 150;
    --lch-gray-darker: 48% 0.024 150;
    --lch-blue: 80% 0.095 150;
    --lch-blue-light: 29.5% 0.036 150;
    --lch-blue-dark: 46% 0.065 150;
    --lch-red: 72% 0.16 28;
    --lch-green: 76% 0.14 148;

    --color-border: oklch(29% 0.018 150);
    --color-border-dark: oklch(35% 0.022 150);

    --garden-card: #181e1b;
    --garden-me-bg: #22352a;
    --garden-me-border: rgba(236, 232, 223, 0.22);
    --garden-hairline: rgba(236, 232, 223, 0.14);
    --garden-hairline-strong: rgba(236, 232, 223, 0.28);
  }
}