:root {
  /* Colors */
  --lexxy-color-ink: var(--color--aaa-text);
  --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.0 260);
  --lexxy-color-accent-medium:   oklch(75% 0.0 258);
  --lexxy-color-accent-light:    oklch(88% 0.0 254);
  --lexxy-color-accent-lightest: oklch(92% 0.0 254);
  
  /* Blue */
  /* --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-accent-dark:     oklch(57% 0.19 340);
  --lexxy-color-accent-medium:   oklch(75% 0.196 340);
  --lexxy-color-accent-light:    oklch(95% 0.044 340); // pressed hover
  --lexxy-color-accent-lightest: oklch(95% 0.022 340); // aria pressed */

  --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);

  --syntax--red: hsl(339, 80%, 50%);
  --syntax--orange: hsl(30, 94%, 42%);
  --syntax--light-orange: hsl(32, 57%, 35%);
  --syntax--yellow: hsl(45, 100%, 41%);
  --syntax--green: hsl(100, 100%, 32%);
  --syntax--blue: hsl(207, 60%, 51%);
  --syntax--purple: hsl(270, 61%, 65%);
  --syntax--gray: hsl(210, 4%, 63%);
  --syntax--dark-gray: hsl(210, 2%, 36%);
  
  --lexxy-color-code-token-att: var(--syntax--red);
  --lexxy-color-code-token-comment: var(--syntax--gray);
  --lexxy-color-code-token-function: var(--syntax--green);
  --lexxy-color-code-token-operator: var(--syntax--red);
  --lexxy-color-code-token-property: var(--syntax--purple);
  --lexxy-color-code-token-punctuation: var(--syntax--dark-gray);
  --lexxy-color-code-token-selector: var(--syntax--yellow);
  --lexxy-color-code-token-variable: var(--syntax--orange);

  --lexxy-color-canvas: var(--color--bg-base);
  --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);

  /* Typography */
  --lexxy-font-base: system-ui, sans-serif;
  --lexxy-text-small: 0.875rem;
  --lexxy-content-margin: 1rem;

  /* Editor */
  --lexxy-editor-padding: var(--input-padding);

  /* Focus ring */
  --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
  --lexxy-focus-ring-offset: 2px;
  --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 {
    --syntax--red: hsl(338, 81%, 59%);
    --syntax--orange: hsl(32, 84%, 64%);
    --syntax--light-orange: hsl(32, 100%, 89%);
    --syntax--yellow: hsl(48, 78%, 53%);
    --syntax--green: hsl(80, 65%, 52%);
    --syntax--blue: hsl(190, 81%, 67%);
    --syntax--purple: hsl(270, 94%, 77%);
    --syntax--gray: hsl(50, 11%, 41%);
    --syntax--light-gray: hsl(60, 30%, 96%);
    
    --lexxy-color-code-token-att: var(--syntax--red);
    --lexxy-color-code-token-comment: var(--syntax--gray);
    --lexxy-color-code-token-function: var(--syntax--green);
    --lexxy-color-code-token-operator: var(--syntax--red);
    --lexxy-color-code-token-property: var(--syntax--purple);
    --lexxy-color-code-token-punctuation: var(--syntax--light-gray);
    --lexxy-color-code-token-selector: var(--syntax--yellow);
    --lexxy-color-code-token-variable: var(--syntax--orange);
  }
}