:root {
  /* Named color values (brand kit) */
  /* LIGHT mode: text = near-black #1A1A1A, bg/surfaces = warm light/cream */
  --lch-black: 23% 0 0;            /* brand text #1A1A1A */
  --lch-white: 96.5% 0.005 95;     /* warm white surface #F5F5F0 */
  --lch-gray: 93% 0.008 90;        /* cream light surface #EDE9E0 */
  --lch-gray-dark: 88% 0.008 90;   /* slightly deeper warm border */
  --lch-gray-darker: 62% 0.006 90; /* mid warm gray (~#888) for darker borders */
  --lch-blue: 73% 0.13 220;        /* ACCENT cyan #0CC0DF */
  --lch-blue-light: 95% 0.03 220;  /* faint cyan selected bg */
  --lch-blue-dark: 80% 0.07 220;   /* cyan selected border */
  --lch-orange: 73% 0.13 220;      /* alert -> cyan accent (no brand orange) */
  --lch-red: 51% 0.2 31;
  --lch-green: 65.59% 0.234 142.49;
  --lch-always-black: 14% 0 0;     /* brand near-black #080808 for shadows */

  /* Abstractions */
  --color-negative: oklch(var(--lch-red));
  --color-positive: oklch(var(--lch-green));
  --color-bg: oklch(var(--lch-white));
  /* Sidebar surface: a subtle step off --color-bg so the two columns read as
     distinct but cohesive. LIGHT = slightly deeper warm neutral than the main. */
  --color-sidebar-bg: oklch(93.5% 0.006 95);
  --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));

  /* Brand accent + own-message tint */
  --color-accent: #0CC0DF;
  --color-own-bg: rgba(12, 192, 223, 0.10);
  --color-own-border: rgba(12, 192, 223, 0.32);

  /* Redefine named color values for dark mode */
  @media (prefers-color-scheme: dark) {
    --lch-black: 96.5% 0.005 95;   /* text -> warm white #F5F5F0 */
    --lch-white: 14% 0 0;          /* bg -> near-black #080808 */
    --lch-gray: 23% 0 0;           /* dark surface #1A1A1A */
    --lch-gray-dark: 28% 0 0;      /* ~#2A2A2A border */
    --lch-gray-darker: 40% 0 0;    /* ~#333 darker border */
    --lch-blue: 73% 0.13 220;      /* accent cyan #0CC0DF */
    --lch-blue-light: 30% 0.05 220;/* dim cyan selected bg */
    --lch-blue-dark: 45% 0.07 220; /* cyan selected border */
    --lch-orange: 73% 0.13 220;    /* alert -> cyan */
    --lch-red: 73.8% 0.184 29.18;
    --lch-green: 75% 0.21 141.89;
    --lch-always-black: 0% 0 0;    /* keep shadows true black on dark */

    /* DARK: sidebar slightly lighter than the near-black main column. */
    --color-sidebar-bg: oklch(18% 0 0);

    /* accent + own-message tint stay the same hue in dark */
    --color-accent: #0CC0DF;
    --color-own-bg: rgba(12, 192, 223, 0.10);
    --color-own-border: rgba(12, 192, 223, 0.32);
  }
}