.theme-dark {
  /* Grayscale Palette */
  --bg-primary: var(--gray-950);
  --bg-secondary: var(--gray-900);
  --bg-tertiary: var(--gray-800);
  --bg-hover: var(--gray-700);
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-400);
  --border-color: var(--gray-700);
  --button-text-primary: var(--white);
  /* Accent Colors */
  --text-accent: var(--purple-100);
  --accent-gradient: linear-gradient(135deg, var(--purple-500), var(--purple-600));
  --accent-color-static: var(--purple-500);
  --accent-color-active: var(--purple-700);
  --accent-shadow-color: rgba(138, 43, 226, 0.5);
  --thinking-text-color: var(--thinking-text-color-dark);
}

/* ==== 2. THEME DEFINITIONS ==== 

    --bg-primary:             Main background.
    --bg-secondary:           Background for the sidebar and modals.
    --bg-tertiary:            Background for smaller elements like AI messages, buttons, and inputs.
    --bg-hover:               Background color for elements in their hover state (e.g., list items).

    --text-primary:           The default text color for all primary content.
    --text-secondary:         A lighter text color for UI labels, placeholders, and author names.
    --text-accent:            Color for text links and other highlighted text elements.
    --button-text-primary:    Text color specifically for buttons with an accent-colored background.

    --border-color:           The color for all borders on inputs, panels, and code blocks.

    --accent-gradient:        Gradient used for user message bubbles and primary button hovers.
    --accent-color-static:    The solid, default accent color for buttons and UI highlights.
    --accent-color-active:    Accent color for elements when clicked.
    --accent-shadow-color:    Semi-transparent glow effect on focused elements.
    --thinking-text-color:    Color for expandable "thinking..."  text.
*/