:root {
  /* Colors */
  --lexxy-color-ink: oklch(20% 0 0);
  --lexxy-color-ink-medium: oklch(40% 0 0);
  --lexxy-color-ink-light: oklch(60% 0 0);
  --lexxy-color-ink-lighter: oklch(85% 0 0);
  --lexxy-color-ink-lightest: oklch(96% 0 0);
  --lexxy-color-ink-inverted: white;

  --lexxy-color-accent-dark: oklch(57% 0.19 260);
  --lexxy-color-accent-medium: oklch(75% 0.196 258);
  --lexxy-color-accent-light: oklch(88% 0.026 254);
  --lexxy-color-accent-lightest: oklch(92% 0.026 254);

  --lexxy-color-red: oklch(60% 0.15 27);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: oklch(66% 0.196 258);
  --lexxy-color-purple: oklch(60% 0.15 305);

  --lexxy-color-code-token-att: #d73a49;
  --lexxy-color-code-token-comment: #6a737d;
  --lexxy-color-code-token-function: #6f42c1;
  --lexxy-color-code-token-operator: #d73a49;
  --lexxy-color-code-token-property: #005cc5;
  --lexxy-color-code-token-punctuation: #24292e;
  --lexxy-color-code-token-selector: #22863a;
  --lexxy-color-code-token-variable: #e36209;

  --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
  --lexxy-color-text: var(--lexxy-color-ink);
  --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-selected: var(--lexxy-color-accent-lightest);
  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
  --lexxy-color-selected-dark: var(--lexxy-color-blue);
  --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

  --highlight-1: rgb(136, 118, 38);
  --highlight-2: rgb(185, 94, 6);
  --highlight-3: rgb(207, 0, 0);
  --highlight-4: rgb(216, 28, 170);
  --highlight-5: rgb(144, 19, 254);
  --highlight-6: rgb(5, 98, 185);
  --highlight-7: rgb(17, 138, 15);
  --highlight-8: rgb(148, 82, 22);
  --highlight-9: rgb(102, 102, 102);

  --highlight-bg-1: rgba(229, 223, 6, 0.3);
  --highlight-bg-2: rgba(255, 185, 87, 0.3);
  --highlight-bg-3: rgba(255, 118, 118, 0.3); 
  --highlight-bg-4: rgba(248, 137, 216, 0.3);
  --highlight-bg-5: rgba(190, 165, 255, 0.3); 
  --highlight-bg-6: rgba(124, 192, 252, 0.3);
  --highlight-bg-7: rgba(140, 255, 129, 0.3); 
  --highlight-bg-8: rgba(221, 170, 123, 0.3);
  --highlight-bg-9: rgba(200, 200, 200, 0.3);

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: 0;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-radius: 0.5ch;
  --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --lexxy-z-popup: 1000;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors - Dark Mode */
    --lexxy-color-ink: oklch(96% 0 0);
    --lexxy-color-ink-medium: oklch(85% 0 0);
    --lexxy-color-ink-light: oklch(60% 0 0);
    --lexxy-color-ink-lighter: oklch(40% 0 0);
    --lexxy-color-ink-lightest: oklch(20% 0 0);
    --lexxy-color-ink-inverted: oklch(15% 0 0);

    --lexxy-color-accent-dark: oklch(75% 0.196 258);
    --lexxy-color-accent-medium: oklch(75% 0.196 258);
    --lexxy-color-accent-light: oklch(60% 0.19 260);
    --lexxy-color-accent-lightest: oklch(30% 0.19 260);

    --lexxy-color-red: oklch(65% 0.15 27);
    --lexxy-color-green: oklch(65% 0.15 145);
    --lexxy-color-blue: oklch(70% 0.196 258);
    --lexxy-color-purple: oklch(65% 0.15 305);

    --lexxy-color-code-token-att: #ff7b72;
    --lexxy-color-code-token-comment: #8b949e;
    --lexxy-color-code-token-function: #d2a8ff;
    --lexxy-color-code-token-operator: #ff7b72;
    --lexxy-color-code-token-property: #79c0ff;
    --lexxy-color-code-token-punctuation: #c9d1d9;
    --lexxy-color-code-token-selector: #7ee787;
    --lexxy-color-code-token-variable: #ffa657;

    --lexxy-color-canvas: var(--lexxy-color-ink-inverted);
    --lexxy-color-text: var(--lexxy-color-ink);
    --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
    --lexxy-color-link: var(--lexxy-color-accent-medium);
    --lexxy-color-selected: var(--lexxy-color-accent-lightest);
    --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
    --lexxy-color-selected-dark: var(--lexxy-color-blue);
    --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);

    --highlight-1: rgb(187, 181, 41);
    --highlight-2: rgb(219, 154, 40);
    --highlight-3: rgb(241, 70, 70);
    --highlight-4: rgb(245, 110, 215);
    --highlight-5: rgb(195, 143, 255);
    --highlight-6: rgb(121, 192, 255);
    --highlight-7: rgb(35, 209, 96);
    --highlight-8: rgb(255, 184, 108);
    --highlight-9: rgb(163, 163, 163);

    --highlight-bg-1: rgba(187, 181, 41, 0.3);
    --highlight-bg-2: rgba(219, 154, 40, 0.3);
    --highlight-bg-3: rgba(241, 70, 70, 0.3);
    --highlight-bg-4: rgba(245, 110, 215, 0.3);
    --highlight-bg-5: rgba(195, 143, 255, 0.3);
    --highlight-bg-6: rgba(121, 192, 255, 0.3);
    --highlight-bg-7: rgba(35, 209, 96, 0.3);
    --highlight-bg-8: rgba(255, 184, 108, 0.3);
    --highlight-bg-9: rgba(163, 163, 163, 0.3);

    --lexxy-focus-ring-color: var(--lexxy-color-accent-medium);
    --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}