@tailwind base;
@tailwind components;
@tailwind utilities;

.arrow-container:hover .arrow-path {
  stroke-opacity: 1;
  fill-opacity: 1;
  stroke-dasharray: 20;
  stroke-dashoffset: -20;
  animation: dash 0.5s forwards;
}

.arrow-path {
  stroke-opacity: 0;
  fill-opacity: 0;
  transition: all 0.3s ease-in-out;
}

html[data-theme="paranoid"] .highlight {
  background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
  margin: -2px -6px;
  padding: 2px 6px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  color: var(--color-accent);
}

html {
  scroll-behavior: smooth;
}

body {
  scroll-padding-top: 3rem;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@layer base {
  html[data-theme="default"] {
    --color-bg-primary: #140117;
    --color-light-bg-primary: #2f0c7a;
    --color-medium: #563acc;
    --color-light-primary: #858afa;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-light-gray: #262b31;
    --color-secondary: #0f9d58;
    --color-warning: #f4b400;
    --color-danger: #db4437;
    --color-accent: #fca5a5;
    --color-neon-purple: #dfe0ff;
    --color-neon-warning: #fffedf;
    --color-neon-pink: #ffdfef;
    --color-neon-green: #dfffff;
    --color-neon-danger: #ffdfdf;
    --color-dark-blue: #161b22;
    --color-light-gray: #2f353c;

    /* Textfarben */
    --text-color-white: var(--color-white);
    --text-color-black: var(--color-black);
    --text-color-medium: var(--color-medium);
    --text-color-light-bg-primary: var(--color-light-bg-primary);
    --text-color-purple: var(--color-purple);
    --text-color-light-primary: var(--color-light-primary);
    --text-color-neon-purple: var(--color-neon-purple);
    --text-color-neon-warning: var(--color-neon-warning);
    --text-color-neon-pink: var(--color-neon-pink);
    --text-color-neon-green: var(--color-neon-green);
    --text-color-neon-danger: var(--color-neon-danger);
  }

  html[data-theme="paranoid"] {
    --color-bg-primary: #000000;
    --color-light-bg-primary: #670000;
    --color-medium: #7f0000;
    --color-light-primary: #ff0000;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-light-gray: #333333;
    --color-secondary: #993300;
    --color-warning: #ff8800;
    --color-danger: #990000;
    --color-accent: #ad2323;
    --color-neon-purple: #ff00ff;
    --color-neon-warning: #ffff00;
    --color-neon-pink: #ff0099;
    --color-neon-green: #00ff00;
    --color-neon-danger: #ff0000;
    --color-dark-blue: #161b22;
    --color-light-gray: #2f353c;

    /* Textfarben */
    --text-color-white: var(--color-white);
    --text-color-black: var(--color-black);
    --text-color-medium: var(--color-medium);
    --text-color-light-bg-primary: var(--color-light-bg-primary);
    --text-color-purple: var(--color-purple);
    --text-color-light-primary: var(--color-light-primary);
    --text-color-neon-purple: var(--color-neon-purple);
    --text-color-neon-warning: var(--color-neon-warning);
    --text-color-neon-pink: var(--color-neon-pink);
    --text-color-neon-green: var(--color-neon-green);
    --text-color-neon-danger: var(--color-neon-danger);
  }
}