@layer reset, base, tokens, recipes, utilities;

@layer tokens {
  :root {
    --color-primary-50-hue: 97%;
    --color-primary-100-hue: 94%;
    --color-primary-200-hue: 86%;
    --color-primary-300-hue: 77%;
    --color-primary-400-hue: 66%;
    --color-primary-500-hue: 50%;
    --color-primary-600-hue: 45%;
    --color-primary-700-hue: 39%;
    --color-primary-750-hue: 35%;
    --color-primary-800-hue: 32%;
    --color-primary-900-hue: 24%;
  }
}

@layer base {
  :where(.shiki span:not(.highlighted)) {
    color: var(--shiki-light);
    /* background-color: var(--shiki-light-bg); */
    font-style: var(--shiki-light-font-style);
    font-weight: var(--shiki-light-font-weight);
    text-decoration: var(--shiki-light-text-decoration);
  }

  .dark {
    :where(.shiki span:not(.highlighted)) {
      color: var(--shiki-dark);
      /* background-color: var(--shiki-dark-bg); */
      font-style: var(--shiki-dark-font-style);
      font-weight: var(--shiki-dark-font-weight);
      text-decoration: var(--shiki-dark-text-decoration);
    }
  }
}
