:root {
  --lexxy-color-accent-dark: oklch(57% 0 260);
  --lexxy-color-accent-light: oklch(88% 0 254);
  --lexxy-color-accent-lightest: oklch(92% 0 254);
  --lexxy-color-accent-medium: oklch(75% 0 258);
  --lexxy-color-canvas: var(--color--bg-base);
  --lexxy-color-code-bg: var(--color--bg-1);
  --lexxy-color-ink: var(--color--aaa-text);
  --lexxy-color-ink-lightest: var(--color--bg-2);
  --lexxy-color-link: var(--lexxy-color-accent-dark);
  --lexxy-color-table-cell-border: var(--color--border-mid-contrast);
  --lexxy-color-table-header-bg: var(--color--bg-1);
  --lexxy-editor-padding: var(--input-padding);
  --lexxy-focus-ring-offset: 2px;
  --lexxy-font-base: var(--font-family--body);
  --lexxy-font-mono: var(--font-family--mono);
  --lexxy-toolbar-button-size: 42px;

  --syntax--blue: hsl(207, 60%, 51%);
  --syntax--dark-gray: hsl(210, 2%, 36%);
  --syntax--gray: hsl(210, 4%, 63%);
  --syntax--green: hsl(100, 63%, 39%);
  --syntax--light-orange: hsl(32, 57%, 35%);
  --syntax--orange: hsl(30, 94%, 42%);
  --syntax--purple: hsl(270, 44%, 59%);
  --syntax--red: hsl(339, 71%, 55%);
  --syntax--yellow: hsl(46, 100%, 33%);
  --syntax--bucket--att: var(--syntax--red);
  --syntax--bucket--comment: var(--syntax--gray);
  --syntax--bucket--function: var(--syntax--green);
  --syntax--bucket--operator: var(--syntax--red);
  --syntax--bucket--property: var(--syntax--purple);
  --syntax--bucket--punctuation: var(--syntax--dark-gray);
  --syntax--bucket--selector: var(--syntax--yellow);
  --syntax--bucket--variable: var(--syntax--orange);
}

[data-theme="dark"] {
  --syntax--bucket--punctuation: var(--syntax--light-gray);
  --syntax--blue: hsl(190, 81%, 67%);
  --syntax--gray: hsl(50, 11%, 41%);
  --syntax--green: hsl(80, 52%, 52%);
  --syntax--light-gray: hsl(60, 30%, 96%);
  --syntax--light-orange: hsl(32, 100%, 89%);
  --syntax--orange: hsl(32, 84%, 64%);
  --syntax--purple: hsl(270, 94%, 77%);
  --syntax--red: hsl(338, 57%, 54%);
  --syntax--yellow: hsl(48, 78%, 53%);
}