:root {
      --theme-color-primary: 14 165 233;
      /* sky-500 */
      --theme-color-secondary: 34 211 238;
      /* cyan-400 */
      --theme-color-accent: 192 132 252;
      /* purple-400 */
    }

    html[data-theme="cyan"] {
      --theme-color-primary: 14 165 233;
      --theme-color-secondary: 34 211 238;
      --theme-color-accent: 192 132 252;
    }

    html[data-theme="crimson"] {
      --theme-color-primary: 220 38 38;
      --theme-color-secondary: 249 115 22;
      --theme-color-accent: 239 68 68;
    }

    html[data-theme="hunter"] {
      --theme-color-primary: 22 163 74;
      --theme-color-secondary: 74 222 128;
      --theme-color-accent: 132 204 22;
    }

    .text-theme-secondary {
      color: rgb(var(--theme-color-secondary));
    }

    .text-theme-accent {
      color: rgb(var(--theme-color-accent));
    }

    .bg-theme-secondary {
      background-color: rgb(var(--theme-color-secondary));
    }

    .border-theme-secondary {
      border-color: rgb(var(--theme-color-secondary));
    }

    .shadow-theme-secondary {
      box-shadow: 0 0 15px rgba(var(--theme-color-secondary), 0.3);
    }

    .shadow-theme-secondary-lg {
      box-shadow: 0 0 30px rgba(var(--theme-color-secondary), 0.2);
    }

    .bg-grid-theme {
      background-image: linear-gradient(rgba(var(--theme-color-secondary), 0.05) 1px,
          transparent 1px),
        linear-gradient(to right,
          rgba(var(--theme-color-secondary), 0.05) 1px,
          transparent 1px);
      background-size: 2rem 2rem;
    }

    body {
      font-family: "Exo 2", sans-serif;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-orbitron {
      font-family: "Orbitron", sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    .text-glow {
      text-shadow: 0 0 8px currentColor;
    }

    .builder-btn.active {
      background-color: rgb(var(--theme-color-secondary));
      color: #0f172a;
      border-color: rgb(var(--theme-color-secondary));
      box-shadow: 0 0 15px rgba(var(--theme-color-secondary), 0.5);
    }

    /* Fancy Tooltip styles */
    #app-tooltip {
      position: fixed;
      background-color: rgb(var(--theme-color-secondary) / 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: rgb(var(--theme-color-secondary));
      border: 1px solid rgb(var(--theme-color-secondary) / 0.3);
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 500;
      max-width: 250px;
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transform: translateY(10px) scale(0.95);
      transition: opacity 0.15s ease-out, transform 0.15s ease-out;
      text-shadow: 0 0 5px rgb(var(--theme-color-secondary) / 0.5);
    }

    /* Scanlines effect */
    /* .scanlines-active::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(18, 18, 18, 0) 50%,
          rgba(0, 0, 0, 0.25) 50%),
        linear-gradient(90deg,
          rgba(255, 0, 0, 0.06),
          rgba(0, 255, 0, 0.02),
          rgba(0, 0, 255, 0.06));
      background-size: 100% 3px, 3px 100%;
      z-index: 9999;
      pointer-events: none;
      animation: scanline-animation 10s linear infinite;
    } */

    .scanlines-active::after {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(to bottom,
          rgba(0, 255, 0, 0.1) 0px,
          rgba(0, 255, 0, 0.1) 2px,
          transparent 2px,
          transparent 4px);
      background-size: 100% 3px, 3px 100%;
      z-index: 9999;
      pointer-events: none;
      animation: moveScanlines 0.5s linear infinite;
    }

    /* @keyframes scanline-animation {
      0% {
        top: -100%;
      }

      100% {
        top: 0;
      }
    } */
    @keyframes moveScanlines {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 0 4px;
      }
    }