:root {
  /* Dark theme base colors */
  --color-bg: #0E0E10;
  --color-bg-elevated: #16161A;
  --color-bg-code: #111114;
  --color-bg-code-header: #18181C;

  /* Text colors - warm grays to match headings */
  --color-text: #E8E8E4;
  --color-text-heading: #F0F0EC;
  --color-text-body: #D4D4D0;
  --color-text-muted: #A8A8A4;
  --color-text-subtle: #78786F;
  --color-text-reversed: #0E0E10;

  /* Category accent colors */
  --color-coral: #FF6B5E;
  --color-teal: #4ECDB4;
  --color-gold: #F5A623;
  --color-purple: #7B8CFF;
  --color-violet: #C49BFF;

  /* Links and accents */
  --color-link: #FF6B5E;
  --color-primary: #FF6B5E;
  --color-highlight: #FF6B5E;

  /* Borders */
  --color-border: #1E1E22;
  --color-border-light: #1E1E24;
  --color-border-dark: #2A2A30;

  /* Selection and highlights */
  --color-selected: #16161A;
  --color-selected-dark: #1E1E24;

  /* Status colors */
  --color-negative: #FF5F57;
  --color-warning: #FEBC2E;
  --color-positive: #28C840;

  /* SVG color values */
  --color-filter-text: invert(0.95);
  --color-filter-text-reversed: invert(0.1);

  /* Semantic text colors for hardcoded values */
  --color-text-medium: #777;
  --color-text-dim: #555;
  --color-text-faint: #444;
  --color-text-soft: #666;
  --color-text-light: #888;
  --color-text-prose-heading: #E0E0DC;
  --color-text-prose-strong: #AAA;
  --color-text-prose-code: #B0B0AC;
  --color-text-prose-quote: #D0D0CC;
  --color-text-item: #C8C8C4;
}

/* Light mode overrides */
[data-theme="light"] {
  --color-bg: #FAFAF8;
  --color-bg-elevated: #FFFFFF;
  --color-bg-code: #F5F5F3;
  --color-bg-code-header: #EAEAE8;

  --color-text: #1A1A1A;
  --color-text-heading: #0E0E10;
  --color-text-body: #333330;
  --color-text-muted: #555550;
  --color-text-subtle: #777773;
  --color-text-reversed: #F0F0EC;
  --color-text-medium: #444440;
  --color-text-dim: #555550;
  --color-text-faint: #666660;
  --color-text-soft: #555550;
  --color-text-light: #555550;
  --color-text-prose-heading: #1A1A1A;
  --color-text-prose-strong: #222;
  --color-text-prose-code: #333;
  --color-text-prose-quote: #2A2A2A;
  --color-text-item: #2A2A2A;

  --color-border: #E0E0DC;
  --color-border-light: #EAEAE6;
  --color-border-dark: #D0D0CC;

  --color-selected: #F0F0EC;
  --color-selected-dark: #E8E8E4;

  --color-filter-text: invert(0.1);
  --color-filter-text-reversed: invert(0.95);
}

* {
  border-color: var(--color-border);
  scrollbar-color: #3A3A40 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}