/*
@see https://vercel.com/design/color
*/
html:not([data-kit-theme="dark"]) {
  /* foreground and background shades */
  --kit-background: #fff;
  --kit-shade-1: #fafafa;
  --kit-shade-2: #e3e3e3;
  --kit-shade-3: #999;
  --kit-shade-4: #888;
  --kit-shade-5: #666;
  --kit-shade-6: #444;
  --kit-shade-7: #333;
  --kit-shade-8: #111;
  --kit-foreground: #000;

  /* Error shades */
  --kit-error-lightest: #f7d4d6;
  --kit-error-light: #ff1a1a;
  --kit-error: #e00;
  --kit-error-dark: #c50000;
  --kit-selection: var(--kit-cyan);
  --kit-scroll-thumb: rgba(22, 24, 35, 0.34);

  --kit-link-color-visited: #551a8b;
  --kit-link-color: #0000ee;
}

html[data-kit-theme="dark"] {
  /* foreground and background shades */
  --kit-background: #000;
  --kit-shade-1: #111;
  --kit-shade-2: #333;
  --kit-shade-3: #444;
  --kit-shade-4: #666;
  --kit-shade-5: #888;
  --kit-shade-6: #999;
  --kit-shade-7: #e3e3e3;
  --kit-shade-8: #fafafa;
  --kit-foreground: #fff;

  /* Error shades */
  --kit-error-lightest: #f7d4d6;
  --kit-error-light: #f33;
  --kit-error: #ff0000;
  --kit-error-dark: #e60000;

  --kit-code: var(--kit-cyan-light);
  --kit-selection: var(--kit-highlight-purple);
  --kit-scroll-thumb: rgba(214, 214, 214, 0.34);

  --kit-link-color-visited: #bd74ff;
  --kit-link-color: #6060ff;
}

/** common */
html {
  /* Success shades */
  --kit-success-lightest: #d3e5ff;
  --kit-success-light: #3291ff;
  --kit-success: #0071ea;
  --kit-success-dark: #0761d1;

  /* Warning shades */
  --kit-warning-lightest: #ffefcf;
  --kit-warning-light: #f7b955;
  --kit-warning: #f5a623;
  --kit-warning-dark: #ab570a;

  /* violet shades */
  --kit-violet-lightest: #bfabe8;
  --kit-violet-light: #8a63d2;
  --kit-violet: #7928ca;
  --kit-violet-dark: #4c2889;

  /* cyan shades */
  --kit-cyan-lightest: #aaffec;
  --kit-cyan-light: #79ffe1;
  --kit-cyan: #50e3c2;
  --kit-cyan-dark: #29bc9b;

  /* highlight shades */
  --kit-highlight-purple: #f81ce5;
  --kit-highlight-magenta: #eb367f;
  --kit-highlight-pink: #ff0080;
  --kit-highlight-yellow: #fff500;

  --kit-theme-fg: var(--kit-success);
  --kit-radius: 5px;
  --kit-padding: 0.5rem;
  --kit-transition: 0.3s ease;
  --kit-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  --kit-border: var(--kit-foreground);
  --kit-secondary: var(--kit-shade-5);
  --kit-form-font-size: 0.87rem;
  --kit-input-height: 3rem;

  --kit-z-index-base: 1;
  --kit-z-index-2: 2;
  --kit-z-index-100: 100;
  --kit-z-index-major: 10000;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--kit-background);
  color: var(--kit-foreground);
  transition: var(--kit-transition);
}

.kit-button,
[button-reset] {
  cursor: pointer;
  font: inherit;
  outline: none;
  user-select: none;
  border-radius: var(--kit-radius);
  border: 2px solid var(--kit-border);
  background-color: var(--kit-background);
  color: var(--kit-foreground);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  transition: var(--kit-transition);
}

.kit-link {
  text-decoration: none;
}

@keyframes kit-skeleton-animation {
  0% {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion) {
  *,
  html {
    --kit-transition: 0.0001s !important;
  }
  .kit-fade-in,
  .kit-move-up {
    animation-duration: 0.0001s !important;
  }
}
* {
  box-sizing: border-box;
}