/* 
  SmartVault Notes - Premium Global Styles
*/

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

@layer base {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
  }

  .dark {
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
  }

  body {
    @apply transition-colors duration-300 overflow-x-hidden;
    background-image: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
                      radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
    background-attachment: fixed;
  }

  .dark body {
    background-color: #0f172a;
    background-image: radial-gradient(at 0% 0%, rgba(30, 58, 138, 0.3) 0, transparent 50%), 
                      radial-gradient(at 50% 0%, rgba(15, 23, 42, 1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, rgba(88, 28, 135, 0.2) 0, transparent 50%);
  }

  body:not(.dark) {
    background-color: #f0f4ff;
    background-image: radial-gradient(at 0% 0%, rgba(219, 234, 254, 1) 0, transparent 50%), 
                      radial-gradient(at 50% 0%, rgba(255, 255, 255, 1) 0, transparent 50%), 
                      radial-gradient(at 100% 0%, rgba(245, 243, 255, 1) 0, transparent 50%);
  }
}

@layer components {
  /* Premium Glassmorphism */
  .glass {
    @apply backdrop-blur-md border shadow-glass;
    background: var(--glass-bg);
    border-color: var(--glass-border);
  }

  /* Custom Scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-primary/30 rounded-full hover:bg-primary/50 transition-colors;
  }

  /* Premium Buttons */
  .btn-primary {
    @apply bg-gradient-to-r from-primary to-primary-dark text-white font-bold py-2.5 px-6 rounded-xl 
           shadow-md transition-all duration-300 hover:shadow-fab hover:-translate-y-0.5 active:translate-y-0;
  }

  .btn-secondary {
    @apply glass text-on-surface font-semibold py-2.5 px-6 rounded-xl 
           transition-all duration-300 hover:bg-surface-hover hover:border-primary/30;
  }

  /* Form Elements */
  .input-field {
    @apply glass bg-white/50 dark:bg-black/20 px-4 py-3 rounded-xl border-border dark:border-dark-border 
           focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/60 transition-all duration-300;
  }

  /* Badge System */
  .badge {
    @apply px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider;
  }

  /* Grid Layouts */
  .notes-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }

  /* Animations Helpers */
  .hover-lift { @apply transition-transform duration-300 hover:-translate-y-1; }
  .hover-glow { @apply transition-all duration-300 hover:shadow-[0_0_20px_rgba(99,102,241,0.3)]; }
}

/* Print Styles */
@media print {
  body { background: white !important; }
  .no-print { display: none !important; }
}