@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

html[data-theme="light"] {
  --l-0: 0%;
  --l-5: 0%;
  --l-10: 10%;
  --l-20: 20%;
  --l-30: 30%;
  --l-40: 40%;
  --l-50: 50%;
  --l-60: 60%;
  --l-70: 70%;
  --l-80: 80%;
  --l-90: 90%;
  --l-95: 95%;
  --l-100: 100%;
}

html[data-theme="dark"] {
  --l-0: 100%;
  --l-5: 95%;
  --l-10: 90%;
  --l-20: 80%;
  --l-30: 70%;
  --l-40: 60%;
  --l-50: 50%;
  --l-60: 40%;
  --l-70: 30%;
  --l-80: 20%;
  --l-90: 10%;
  --l-95: 5%;
  --l-100: 0%;
}

/* prettier-ignore */
body {
    --_canary-color-primary-c: var(--canary-color-primary-c, 0.1);
    --_canary-color-primary-h: var(--canary-color-primary-h, 270);
    --canary-color-primary-ch: var(--_canary-color-primary-c) var(--_canary-color-primary-h);
    
    --_canary-color-gray-c: var(--canary-color-gray-c, 0);
    --_canary-color-gray-h: var(--canary-color-gray-h, 0);
    --canary-color-gray-ch: var(--_canary-color-gray-c) var(--_canary-color-gray-h);
    
    --canary-color-primary-0: oklch(var(--l-0) var(--canary-color-primary-ch));
    --canary-color-primary-5: oklch(var(--l-5) var(--canary-color-primary-ch));
    --canary-color-primary-10: oklch(var(--l-10) var(--canary-color-primary-ch));
    --canary-color-primary-20: oklch(var(--l-20) var(--canary-color-primary-ch));
    --canary-color-primary-30: oklch(var(--l-30) var(--canary-color-primary-ch));
    --canary-color-primary-40: oklch(var(--l-40) var(--canary-color-primary-ch));
    --canary-color-primary-50: oklch(var(--l-50) var(--canary-color-primary-ch));
    --canary-color-primary-60: oklch(var(--l-60) var(--canary-color-primary-ch));
    --canary-color-primary-70: oklch(var(--l-70) var(--canary-color-primary-ch));
    --canary-color-primary-80: oklch(var(--l-80) var(--canary-color-primary-ch));
    --canary-color-primary-90: oklch(var(--l-90) var(--canary-color-primary-ch));
    --canary-color-primary-95: oklch(var(--l-95) var(--canary-color-primary-ch));
    --canary-color-primary-100: oklch(var(--l-100) var(--canary-color-primary-ch));
    
    --canary-color-gray-0: oklch(var(--l-0) var(--canary-color-gray-ch));
    --canary-color-gray-5: oklch(var(--l-5) var(--canary-color-gray-ch));
    --canary-color-gray-10: oklch(var(--l-10) var(--canary-color-gray-ch));
    --canary-color-gray-20: oklch(var(--l-20) var(--canary-color-gray-ch));
    --canary-color-gray-30: oklch(var(--l-30) var(--canary-color-gray-ch));
    --canary-color-gray-40: oklch(var(--l-40) var(--canary-color-gray-ch));
    --canary-color-gray-50: oklch(var(--l-50) var(--canary-color-gray-ch));
    --canary-color-gray-60: oklch(var(--l-60) var(--canary-color-gray-ch));
    --canary-color-gray-70: oklch(var(--l-70) var(--canary-color-gray-ch));
    --canary-color-gray-80: oklch(var(--l-80) var(--canary-color-gray-ch));
    --canary-color-gray-90: oklch(var(--l-90) var(--canary-color-gray-ch));
    --canary-color-gray-95: oklch(var(--l-95) var(--canary-color-gray-ch));
    --canary-color-gray-100: oklch(var(--l-100) var(--canary-color-gray-ch));
}

code pre {
  padding: 8px 12px;
  border-radius: 8px;
}

span.line.highlighted {
  border-radius: 2px;
  background-color: rgba(142, 150, 170, 0.14);
  width: 100%;
  display: inline-block;
}

span.line {
  text-wrap: pretty;
}

span.line.diff.add {
  background-color: rgba(16, 185, 129, 0.14);
}

span.line.diff.remove {
  background-color: rgba(244, 63, 94, 0.14);
}
