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

:root {
  --backprimary: #000000;
  --backsecondary: #1A1A1A;
  --backtertiary: #2A2A2A;
  --backquaternary: #3A3A3A;
  --foreprimary: #CE7688;
  --foresecondary: #BA6A7B;
  --forequinary: #8E4E5D;
  --highprimary: #C1B48E;
  --highsecondary: #B5A985;
  --highseptenary: #69614C;
  --accent: #FFB1C3;
  --view-bg: #050505;
  --font-stack: "Iosevka", "Iosevka Nerd Font", "Iosevka Term", monospace;
}

html,
body {
  background: var(--backprimary);
  color: var(--forequinary);
  font-family: var(--font-stack);
}

input, textarea, button, select {
  font-family: var(--font-stack);
  color: var(--foreprimary);
  background: var(--backsecondary);
}

::selection {
  background: rgba(255, 177, 195, 0.25);
  color: var(--highprimary);
}

.prose,
.prose-invert {
  color: var(--forequinary);
}

.prose a,
a {
  color: var(--foreprimary);
}

.prose a:hover,
a:hover {
  color: var(--highprimary);
}

.prose strong,
strong {
  color: var(--highprimary);
}

@media (pointer: fine) {
  * {
    cursor: none !important;
  }

  html,
  body,
  a,
  button,
  input,
  textarea,
  select {
    cursor: none !important;
  }

  .fake-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .fake-cursor.is-visible {
    opacity: 1;
  }

  .fake-cursor::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/cursor/cursor.cur') center / contain no-repeat;
    filter:
      sepia(1)
      saturate(1.35)
      hue-rotate(295deg)
      brightness(1.08)
      drop-shadow(0 0 8px rgba(206, 118, 136, 0.45));
    animation: fake-cursor-pulse 900ms ease-in-out infinite alternate;
    transform-origin: center;
  }

  .fake-cursor.is-hovering::before {
    filter:
      sepia(1)
      saturate(1.5)
      hue-rotate(300deg)
      brightness(1.14)
      drop-shadow(0 0 12px rgba(255, 177, 195, 0.6));
    transform: scale(1.08);
  }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fake-cursor {
    display: none;
  }
}

@keyframes fake-cursor-pulse {
  from {
    transform: scale(0.94) rotate(-6deg);
  }

  to {
    transform: scale(1.08) rotate(6deg);
  }
}