frontend/src/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

@import "tailwindcss";@layer base {
  html, body {
    background-color: #080604;
    color: #E2D1B3;
    font-family: 'Inter', system-ui, sans-serif;
    /* Subtle noise texture over the deep dark background */
    background-image: radial-gradient(circle at 50% 0%, #1a1410 0%, #080604 70%);
  }
}

@layer components {
  .glass-panel {
    background-color: rgba(20, 16, 12, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #2D241A;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  
  .font-cinzel {
    font-family: 'Cinzel', serif;
  }

  .gold-gradient-text {
    background-image: linear-gradient(to right, #DAB062, #F3DE9A, #DAB062);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }
  
  .input-alchemist {
     width: 100%;
     background-color: #0a0805;
     border: 1px solid #2D241A;
     border-radius: 0.5rem;
     padding: 0.75rem 1.25rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
     color: #E2D1B3;
     transition: all 150ms;
     font-weight: 300;
  }

  .input-alchemist:focus {
     outline: none;
     border-color: #DAB062;
     box-shadow: 0 0 0 1px rgba(218, 176, 98, 0.5);
  }
}

/* Custom Scrollbar for premium feel */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #080604;
}
::-webkit-scrollbar-thumb {
  background: #2D241A;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #DAB062;
}