:root {
  /* Colors */
  --lexxy-color-ink: var(--theme-white);
  --lexxy-color-ink-medium: var(--theme-mid-grey);
  --lexxy-color-ink-light: var(--color-mid-grey-light);
  --lexxy-color-ink-lighter: var(--theme-dark-grey);
  --lexxy-color-ink-lightest: color-mix(in srgb, var(--theme-white) 6%, var(--theme-dark-grey));
  --lexxy-color-ink-inverted: var(--theme-black);

  --lexxy-color-accent-dark: var(--color-blue);
  --lexxy-color-accent-medium: color-mix(in srgb, var(--color-blue) 60%, var(--theme-black));
  --lexxy-color-accent-light: color-mix(in srgb, var(--color-blue) 20%, var(--theme-dark-grey));
  --lexxy-color-accent-lightest: color-mix(in srgb, var(--color-blue) 10%, var(--theme-dark-grey));

  --lexxy-color-red: var(--color-orange);
  --lexxy-color-green: oklch(60% 0.15 145);
  --lexxy-color-blue: var(--color-blue);
  --lexxy-color-purple: oklch(60% 0.15 305);

  /* Code syntax tokens — tuned for dark background */
  --lexxy-color-code-token-att: #e06c75;
  --lexxy-color-code-token-comment: var(--color-mid-grey-light);
  --lexxy-color-code-token-function: #c678dd;
  --lexxy-color-code-token-operator: #e06c75;
  --lexxy-color-code-token-property: #61afef;
  --lexxy-color-code-token-punctuation: var(--theme-mid-grey);
  --lexxy-color-code-token-selector: #98c379;
  --lexxy-color-code-token-variable: var(--color-brown);

  --lexxy-color-canvas: var(--theme-dark-grey);
  --lexxy-color-text: var(--theme-white);
  --lexxy-color-text-subtle: var(--theme-mid-grey);
  --lexxy-color-link: var(--color-blue);
  --lexxy-color-selected: color-mix(in srgb, var(--color-blue) 15%, var(--theme-dark-grey));
  --lexxy-color-selected-hover: color-mix(in srgb, var(--color-blue) 25%, var(--theme-dark-grey));
  --lexxy-color-selected-dark: var(--color-blue);
  --lexxy-color-code-bg: var(--theme-black);

  /* Text color highlights */
  --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);

  /* Tables — stroke only, no fill */
  --lexxy-color-table-cell-border: color-mix(in srgb, var(--theme-mid-grey) 45%, transparent);
  --lexxy-color-table-cell-header-border: var(--theme-mid-grey);
  --lexxy-color-table-cell-selected-border: var(--color-blue);
  --lexxy-color-table-cell-selected-bg: color-mix(in srgb, var(--color-blue) 10%, transparent);

  /* Typography */
  --lexxy-font-base: 'Quadrant Slab', serif;
  --lexxy-font-mono: 'Pressura Mono', monospace;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Focus ring — matches site's orange form focus */
  --lexxy-focus-ring-color: var(--color-orange);
  --lexxy-focus-ring-offset: 0;
  --lexxy-focus-ring-size: 2px;

  /* Misc */
  --lexxy-radius: 0.25rem;
  --lexxy-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  --lexxy-z-popup: 1000;
}