/* Dark mode overrides for Lexxy variables */

.dark {
  /* Inverted base colors for dark mode */
  --lexxy-color-ink: var(--app-text-primary, oklch(96% 0 0));
  --lexxy-color-ink-medium: var(--app-text-secondary, oklch(75% 0 0));
  --lexxy-color-ink-light: var(--app-text-muted, oklch(60% 0 0));
  --lexxy-color-ink-lighter: color-mix(in srgb, var(--app-border-strong, oklch(40% 0 0)) 72%, black 28%);
  --lexxy-color-ink-lightest: var(--app-surface-3, oklch(20% 0 0));
  --lexxy-color-ink-inverted: var(--app-surface-1, oklch(25% 0 0));

  /* Canvas and text colors */
  --lexxy-color-canvas: var(--app-surface-1, oklch(25% 0 0));
  --lexxy-color-text: var(--app-text-primary, oklch(96% 0 0));
  --lexxy-color-text-subtle: var(--app-text-secondary, oklch(85% 0 0));

  /* Accent colors - slightly lighter for dark mode */
  --lexxy-color-accent-dark: var(--app-accent-strong, oklch(70% 0.19 260));
  --lexxy-color-accent-medium: var(--app-accent, oklch(75% 0.196 258));
  --lexxy-color-accent-lightest: color-mix(in srgb, var(--app-accent, oklch(35% 0.026 254)) 18%, var(--app-surface-2, black));

  /* Selection color - visible on dark background */
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);

  /* Code background - darker */
  --lexxy-color-code-bg: color-mix(in srgb, var(--app-surface-3, oklch(15% 0 0)) 88%, black 12%);

  /* Code syntax highlighting - adjusted for dark mode */
  --lexxy-color-code-token-att: #f97583;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #f97583;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #e6edf3;
  --lexxy-color-code-token-selector: #7ee787;
  --lexxy-color-code-token-variable: #ffa657;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--app-ring, #93c5fd);
}