@import "./fonts.css";
@import "tailwindcss";
@import "@nuxt/ui";

@plugin "@tailwindcss/typography";

@theme {
  /* Font families */
  --font-sans: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Ubuntu Mono", monospace;
  --font-display: "NB Television Pro", monospace;

  /* Ethereal color palette - light mode (inverted for light backgrounds) */
  --color-ghost-50: #0a0a0a;
  --color-ghost-100: #1a1a1a;
  --color-ghost-200: #2a2a2a;
  --color-ghost-300: #3a3a3a;
  --color-ghost-400: #4a4a4a;
  --color-ghost-500: #6a6a6a;
  --color-ghost-600: #8a8a8a;
  --color-ghost-700: #b0b0b0;
  --color-ghost-800: #d0d0d0;
  --color-ghost-900: #f0f0f0;

  /* Subtle accent - barely visible blue-gray (light mode) */
  --color-whisper-50: #0f1419;
  --color-whisper-100: #1a1f2e;
  --color-whisper-200: #252d40;
  --color-whisper-300: #2f3b52;
  --color-whisper-400: #3a4964;
  --color-whisper-500: #4f5d7a;
  --color-whisper-600: #687291;
  --color-whisper-700: #8491a8;
  --color-whisper-800: #a8b3c7;
  --color-whisper-900: #d4dae6;

  /* Sparkle accent (light mode) */
  --color-sparkle-50: #202020;
  --color-sparkle-100: #404040;
  --color-sparkle-200: #606060;
  --color-sparkle-300: #808080;
  --color-sparkle-400: #a0a0a0;
  --color-sparkle-500: #c0c0c0;
  --color-sparkle-600: #d0d0d0;
  --color-sparkle-700: #e8e8e8;
  --color-sparkle-800: #f0f0f0;
  --color-sparkle-900: #fafafa;
}

.dark {
  /* Ethereal color palette - dark mode (original values) */
  --color-ghost-50: #f0f0f0;
  --color-ghost-100: #d0d0d0;
  --color-ghost-200: #b0b0b0;
  --color-ghost-300: #8a8a8a;
  --color-ghost-400: #6a6a6a;
  --color-ghost-500: #4a4a4a;
  --color-ghost-600: #3a3a3a;
  --color-ghost-700: #2a2a2a;
  --color-ghost-800: #1a1a1a;
  --color-ghost-900: #0a0a0a;

  /* Subtle accent - barely visible blue-gray (dark mode) */
  --color-whisper-50: #d4dae6;
  --color-whisper-100: #a8b3c7;
  --color-whisper-200: #8491a8;
  --color-whisper-300: #687291;
  --color-whisper-400: #4f5d7a;
  --color-whisper-500: #3a4964;
  --color-whisper-600: #2f3b52;
  --color-whisper-700: #252d40;
  --color-whisper-800: #1a1f2e;
  --color-whisper-900: #0f1419;

  /* Sparkle accent (dark mode) */
  --color-sparkle-50: #fafafa;
  --color-sparkle-100: #f0f0f0;
  --color-sparkle-200: #e8e8e8;
  --color-sparkle-300: #d0d0d0;
  --color-sparkle-400: #c0c0c0;
  --color-sparkle-500: #a0a0a0;
  --color-sparkle-600: #808080;
  --color-sparkle-700: #606060;
  --color-sparkle-800: #404040;
  --color-sparkle-900: #202020;
}

/* Global ethereal background - light mode */
:root {
  --ethereal-bg:
    radial-gradient(
      circle at 20% 80%,
      rgba(40, 40, 40, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(40, 40, 40, 0.02) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(40, 40, 40, 0.01) 0%,
      transparent 50%
    );

  --halftone-pattern: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px
  );
  --halftone-size: 8px 8px;
}

/* Dark mode background */
.dark:root {
  --ethereal-bg:
    radial-gradient(
      circle at 20% 80%,
      rgba(232, 232, 232, 0.03) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(232, 232, 232, 0.02) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(232, 232, 232, 0.01) 0%,
      transparent 50%
    );

  --halftone-pattern: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 1px,
    transparent 1px
  );
}

html {
  @apply text-[--ui-text];
}

body {
  background: var(--ethereal-bg), #f0f0f0;
  background-attachment: fixed;
}

.dark body {
  background: var(--ethereal-bg), #0a0a0a;
}

/* Halftone texture overlay */
.halftone-texture {
  position: relative;
}

.halftone-texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--halftone-pattern);
  background-size: var(--halftone-size);
  opacity: 0.1;
  pointer-events: none;
}

/* Sparkle effects */
@keyframes sparkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  25% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.4;
  }
}

.sparkle-field {
  position: relative;
  overflow: hidden;
}

.sparkle-field::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 10% 20%,
      var(--color-sparkle-200) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 90% 80%,
      var(--color-sparkle-400) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 30% 70%,
      var(--color-sparkle-200) 0.5px,
      transparent 0.5px
    ),
    radial-gradient(
      circle at 70% 30%,
      var(--color-sparkle-400) 0.5px,
      transparent 0.5px
    ),
    radial-gradient(
      circle at 50% 10%,
      var(--color-sparkle-200) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 20% 90%,
      var(--color-sparkle-400) 0.5px,
      transparent 0.5px
    );
  background-size:
    200px 200px,
    300px 300px,
    150px 150px,
    250px 250px,
    180px 180px,
    220px 220px;
  animation: twinkle 4s infinite ease-in-out;
  pointer-events: none;
  opacity: 0.6;
}

/* Ethereal glow effects */
.ethereal-glow {
  box-shadow:
    0 0 20px rgba(232, 232, 232, 0.1),
    0 0 40px rgba(232, 232, 232, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ethereal-text {
  text-shadow: 0 0 10px rgba(232, 232, 232, 0.3);
}

/* Dithered gradients */
.dithered-bg {
  background:
    linear-gradient(45deg, var(--color-ghost-800) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-ghost-800) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-ghost-700) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-ghost-700) 75%);
  background-size: 4px 4px;
  background-position:
    0 0,
    0 2px,
    2px -2px,
    -2px 0px;
}

/* Mobile responsive utilities */
@media (max-width: 1023px) {
  /* Prevent horizontal scroll on mobile */
  body {
    overflow-x: hidden;
  }

  /* Adjust halftone pattern for mobile */
  .halftone-texture::before {
    background-size: 6px 6px;
  }
}