:root {
  /* Text */
  --lexxy-color-ink: var(--main-text);
  --lexxy-color-ink-medium: var(--main-secondary-accent-brighter);
  --lexxy-color-ink-light: var(--main-secondary-accent);

  /* Borders / subtle UI */
  --lexxy-color-ink-lighter: color-mix(
    in srgb,
    var(--main-secondary-accent) 35%,
    var(--main-background)
  );
  --lexxy-color-ink-lightest: var(--main-secondary-accent);

  /* Editor */
  --lexxy-color-canvas: var(--main-background);
  --lexxy-color-text: var(--main-text);
  --lexxy-color-text-subtle: var(--main-secondary-accent-brighter);

  /* Accents */
  --lexxy-color-link: var(--main-primary-accent);
  --lexxy-color-accent-dark: var(--main-primary-accent);
  --lexxy-color-accent-medium: var(--main-primary-accent);

  /* Selection */
  --lexxy-color-selected: var(--main-tertiary-accent);
  --lexxy-color-selected-hover: var(--main-foreground);
  --lexxy-color-selected-dark: var(--main-primary-accent);

  /* Code */
  --lexxy-color-code-bg: var(--main-tertiary-accent);

  /* Focus */
  --lexxy-focus-ring-color: var(--main-primary-accent);

  /* Inverted */
  --lexxy-color-ink-inverted: var(--main-background);
}
