@theme {
  --breakpoint-md: 40em;
  --breakpoint-lg: 80em;

  --spacing-1-8: 0.125em;
  --spacing-1-4: 0.25em;
  --spacing-3-8: 0.375em;
  --spacing-1-3: 0.3333333333em;
  --spacing-1-2: 0.5em;
  --spacing-5-8: 0.625em;
  --spacing-2-3: 0.6666666666em;
  --spacing-3-4: 0.75em;
  --spacing-7-8: 0.875em;
  --spacing-1-1: 1em;
  --spacing-3-2: 1.5em;
  --spacing-2-1: 2em;
  --spacing-3-1: 3em;
  --spacing-4-1: 4em;
}

:root {
  --fx-noise-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.05'%3E%3C/rect%3E%3C/svg%3E");

  --gradient-dotted: repeating-conic-gradient(
    var(--color-base-200) 0% 25%,
    var(--color-base-100) 0% 100%
  ) 2px 1px / 4px 4px;
}

/*
https://daisyui.com/theme-generator/?lang=en#theme=eJx90s1ugzAMAOBXqbLLJkGVEKC0b5Mfp0SjCXJA6zbt3ZfQruug48DB_mLHFvkkTpyAHEg3OtVKfyYZUb7zmAfVwkXssR1iOs8vIEWAnFEa6QkM7AyfY3FBXSnQ-znyCfEoxXPNsk1VZps6fnTLX-ZHlXcDuCH14prXJb070KM9CXxPRmlDa7G0-_rFoAGi6p8OptyV-pGu9hBKXUk1eq_lglY3cDAOKLo1W73dOuMTMNOUSs1gffcxThfCVFxIXhdLW538TaCz7jgtripT7Je2ej8gekwiOZO8nMs_tSi0HUP8NR2oYaqn2wrhdI_GQqcfSnraKV_cINgP-NutaNiMf_sVrNndTHrUkGpYf54SGvqhTfEUOW8DXCMNRoxd3GXAETLSY9wIQ3xar-RgRBfg6xuKKhF2
*/

@plugin 'daisyui/theme' {
  name: 'lunchbox';
  default: true;
  prefersdark: false;
  color-scheme: 'light';
  --color-base-100: #efe7f3;
  --color-base-200: #d5ced9;
  --color-base-300: rgba(61, 54, 64, 0.3);
  --color-base-content: #3d3640;
  --color-primary: #00806a;
  --color-primary-content: #efe7f3;
  --color-secondary: #0f474d;
  --color-secondary-content: #efe7f3;
  --color-accent: #c8d9db;
  --color-accent-content: #3d3640;
  --color-neutral: #3d3640;
  --color-neutral-content: #efe7f3;
  --color-info: #1f84cc;
  --color-info-content: #efe7f3;
  --color-success: #12b362;
  --color-success-content: #3d3640;
  --color-warning: #cc5f29;
  --color-warning-content: #efe7f3;
  --color-error: #b31b34;
  --color-error-content: #efe7f3;

  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.25rem;

  --size-selector: 0.28125rem;
  --size-field: 0.21875rem;

  --border: 1px;

  --depth: 0;
  --noise: 1;
}

/*
https://daisyui.com/theme-generator/?lang=en#theme=eJx9kuuKgzAQhV9FLAtdUMnNW98mJpNW1hqZKHtj332Nlm7WFv8Ime_MmTOJ33EvrxCfYjcNA2BjP-IkTlOUup1c6qADNVqcOclyhGsITQudfkq8i6-zO3DtF_x3YxXd4D8_RqvyzhqLGnwPHdZsGobx4nXLqbetg9tJ2c5i6tQFlpW0xLdFs9Yb6SClhMzkwAQ1rNhCtkKueSHIFvIF4rmRR8arJGKczB_Bkohk_HWrVrYfoR-9HQAUhgWCHqYRZbfHwv6HrG1vrAfUVEKpALhJKXBuZvatU5djyV4if5t1REWd5WUdxnyX2Lf92RsZA7IKFwbE5ZkORpUz2szeXe6WIdCsWerKZyG0imieZxUrnmTZ3XrJtKsYsL1K_PRMEyNLHcaCuVPfKGUNL8LQcs68mnIhSlE-mu4OvpvvqtYhTy9Pg5FTN9eM7Bwk8YBgAN3yA59GnODnFxrLGAI
*/

@plugin 'daisyui/theme' {
  name: 'supperbox';
  default: false;
  prefersdark: true;
  color-scheme: 'dark';
  --color-base-100: #241f26;
  --color-base-200: #3d3640;
  --color-base-300: rgba(238, 230, 242, 0.3);
  --color-base-content: #eee6f2;
  --color-primary: #d0fa7d;
  --color-primary-content: #241f26;
  --color-secondary: #12b362;
  --color-secondary-content: #241f26;
  --color-accent: #344747;
  --color-accent-content: #eee6f2;
  --color-neutral: #eee6f2;
  --color-neutral-content: #241f26;
  --color-info: #1f84cc;
  --color-info-content: #eee6f2;
  --color-success: oklch(72% 0.219 149.579);
  --color-success-content: oklch(98% 0.018 155.826);
  --color-warning: #ffea80;
  --color-warning-content: #241f26;
  --color-error: #fc7ea8;
  --color-error-content: #241f26;
}

@layer base {
  html {
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);

    @variant dark {
      background-image: none, var(--fx-noise-50);
    }
  }
}

@layer components {
  .noise {
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);

    @variant dark {
      background-image: none, var(--fx-noise-50);
    }
  }

  .prose {
    max-width: 75ch;
    margin-top: var(--sp-1-1);

    a.anchor {
      background-color: var(--color-base-300);
      fill: var(--color-base-100);
      line-height: 0px;
      display: inline-block;
      position: relative;
      padding: var(--spacing-1-8);
      left: -8px;
    }

    a.anchor:hover {
      background-color: var(--color-primary);
    }

    h1, h2, h3, h4, h6, h6 {
      display: flex;
      align-items: center;
      margin-top: var(--spacing-2-1);
      scroll-margin-top: var(--spacing-3-1);
    }
  }

  .layout {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-inline: var(--spacing-1-2);
    gap: var(--spacing-1-2);

    @media (min-width: 40em) {
      margin-inline: var(--spacing-1-1);
      gap: var(--spacing-1-1);
    }

    @media (min-width: 80em) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      margin-inline: 20%;
    }
  }
}

@layer utilities {
  .bg-dotted {
    background: var(--gradient-dotted);
  }
}

:focus {
  background: var(--gradient-dotted);
  animation: flicker 50ms 2;
  filter: invert();
  outline: 0;
  color: var(--color-neutral);
  border-color: var(--color-base-300);
}

:focus-visible {
  outline: 0;
}

@keyframes flicker {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }
}

.shake:focus {
  animation: 200ms steps(1, jump-start) shake;
}
.shake_left:focus {
  animation: 125ms steps(1, jump-start) shake_left;
}
.shake_right:focus {
  animation: 125ms steps(1, jump-start) shake_right;
}
.shake_up:focus {
  animation: 125ms steps(1, jump-start) shake_up;
}
.shake_down:focus {
  animation: 125ms steps(1, jump-start) shake_down;
}

@keyframes shake {
  0% {
    transform: translate(0);
  }
  33% {
    transform: translate(0.125rem, 0.125rem);
  }
  67% {
    transform: translate(-0.125rem, -0.125rem);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes shake_left {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-0.25rem);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes shake_right {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.25rem);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes shake_up {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes shake_down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.25rem);
  }
  100% {
    transform: translateY(0);
  }
}