/* vfs:src/styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --color-bg: #0a0a0a;
    --color-surface: #1a1a2e;
    --color-glass: rgba(255, 255, 255, 0.05);
    --color-glass-border: rgba(255, 255, 255, 0.1);
    --color-primary: #00d4ff;
    --color-accent: #ff6b6b;
    --color-text: #e0e0e0;
    --color-text-muted: #a0a0a0;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
  }
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 3px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: #00b8e6;
  }
  html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
  }
}
@layer components {
  .glass {
    background: var(--color-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-glass-border);
    border-radius: 1rem;
  }
  .glass-dark {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  .glass-light {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  .snap-y {
    scroll-snap-type: y mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
  .snap-center {
    scroll-snap-align: center;
  }
  .snap-end {
    scroll-snap-align: end;
  }
  .snap-none {
    scroll-snap-type: none;
  }
}
@layer utilities {
  .text-gradient {
    background:
      linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
}