:root {
  /* Colors */
  /* 目前 canary 等浏览器处理 OKLCH 的 colors.bg 100% 亮度时有 bug，建议值为 0.04 */

  /* fg */
  --primary-c: 0.01;
  --primary-h: 20;
  /* ac */
  --secondary-c: 0.28;
  --secondary-h: 40;
  --bg-c: 0;

  /* OKLCH lightness helpers */
  --fg-l: 30%;
  --bg-l: 100%;
  --ac-l: 50%;
  --hl-l: 77.7%;
  --bg-dark-l: 96.12%;

  /* OKLCH helpers */
  --lch-l-offset: 0%;
  --lch-l-clamp-min: 15%;
  --lch-l-clamp-max: 99%;
  /* Used by colors except fg, bg, ac and hl which needs to be dynamic */
  --lch-c: 0.28;

  /* Tailwind built-in color hue in OKLCH */
  /* https://tailwindcss.com/docs/colors */
  --hue-bg: 0;
}

/* Global dark theme overrides */
:root[data-color-mode='dark'] {
  /* fg */
  --primary-c: 0.01;
  --primary-h: 4.45;
  /* ac */
  --secondary-c: 0.212;
  --secondary-h: 8;

  --hue-bg: 264.4;

  /* OKLCH lightness helpers */
  --fg-l: 78%;
  --bg-l: 0%;
  --ac-l: 70%;
  --hl-l: 33.66%;
  --bg-dark-l: 5%;

  --lch-l-offset: 20%;
}

:root:not([data-color-mode='light']) {
  @media (prefers-color-scheme: dark) {
    /* fg */
    --primary-c: 0.01;
    --primary-h: 4.45;
    /* ac */
    --secondary-c: 0.212;
    --secondary-h: 8;

    --hue-bg: 264.4;

    /* OKLCH lightness helpers */
    --fg-l: 78%;
    /* bg https://oklch.com/#0.2346,0.0083,264.4,100 */
    --bg-l: 0%;
    --ac-l: 70%;
    --hl-l: 33.66%;
    --bg-dark-l: 5%;

    --lch-l-offset: 20%;
  }
}