@custom-variant dark (&:is(.dark *));

:root {
  --background: #1a1b1e;
  --foreground: #f0f0f0;
  --card: #222327;
  --card-foreground: #f0f0f0;
  --popover: #222327;
  --popover-foreground: #f0f0f0;
  --primary: #8c5cff;
  --primary-foreground: #ffffff;
  --secondary: #2a2c33;
  --secondary-foreground: #f0f0f0;
  --muted: #2a2c33;
  --muted-foreground: #a0a0a0;
  --accent: #1e293b;
  --accent-foreground: #79c0ff;
  --destructive: #f87171;
  --destructive-foreground: #ffffff;
  --border: #33353a;
  --input: #33353a;
  --ring: #8c5cff;

  --font-sans: DM Sans, sans-serif;
  --font-serif: DM Sans, sans-serif;
  --font-mono: Space Mono, monospace;
  --radius: 1rem;
  --shadow-x: 0px;
  --shadow-y: 0px;
  --shadow-blur: 0px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.05;
  --shadow-color: #1a1a1a;
  --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
  --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03);
  --shadow-sm:
    0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05),
    0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow:
    0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05),
    0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-md:
    0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05),
    0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-lg:
    0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05),
    0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-xl:
    0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05),
    0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13);
  --tracking-normal: normal;
  --spacing: 0.25rem;

  /* Extended theme tokens */
  --accent-primary: #8c5cff;
  --accent-secondary: #79c0ff;
  --accent-glow: #8c5cff;
}

@layer base {
  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-foreground);
    background: var(--primary);
    box-shadow: 0 4px 14px -3px
      color-mix(in srgb, var(--primary) 40%, transparent);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
  }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px
      color-mix(in srgb, var(--primary) 50%, transparent);
  }
  .btn-primary:active {
    transform: scale(0.98);
  }

  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--muted-foreground);
    background: transparent;
    border: 1px solid var(--border);
    transition:
      color 0.2s ease,
      border-color 0.2s ease;
  }
  .btn-secondary:hover {
    color: var(--foreground);
    border-color: var(--foreground);
  }

  .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background: transparent;
    transition: color 0.2s ease;
  }
  .btn-ghost:hover {
    color: var(--foreground);
  }

  .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-foreground);
    background: linear-gradient(
      135deg,
      var(--accent-primary),
      var(--accent-secondary)
    );
    box-shadow: 0 4px 15px -3px
      color-mix(in srgb, var(--accent-primary) 40%, transparent);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px
      color-mix(in srgb, var(--accent-primary) 50%, transparent);
  }
  .btn-accent:active {
    transform: scale(0.98);
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    background: transparent;
    border: 1px solid var(--primary);
    transition:
      background 0.2s ease,
      color 0.2s ease;
  }
  .btn-outline:hover {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .mesh-ring {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    background: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--accent-primary) 10%, transparent) 2px,
      color-mix(in srgb, var(--accent-secondary) 15%, transparent) 4px
    );
    box-shadow: 0 0 15px
      color-mix(in srgb, var(--accent-primary) 10%, transparent);
    mix-blend-mode: screen;
  }

  .glass-card {
    background: color-mix(in srgb, var(--card) 80%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }

  .bg-portal {
    background: radial-gradient(
      circle at center,
      color-mix(in srgb, var(--accent-primary) 15%, transparent) 0%,
      transparent 70%
    );
  }

  .btn-shine {
    position: relative;
    overflow: hidden;
  }
  .btn-shine::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to right,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    transform: skewX(-20deg) translateX(-150%);
    animation: shine 4s infinite;
  }

  @keyframes spin-reverse {
    to {
      transform: rotate(-360deg);
    }
  }

  @keyframes shine {
    0% {
      transform: translateX(-100%);
    }
    20%,
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes breathe {
    0%,
    100% {
      transform: scale(1);
      filter: brightness(1);
    }
    50% {
      transform: scale(1.05);
      filter: brightness(1.2);
    }
  }

  @keyframes float1 {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  @keyframes float2 {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(15px);
    }
  }
}