frontend/src/app/globals.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
  --color-primary: #D4AF37;
  --color-charcoal: #36454F;
  --color-background-light: #f8f7f6;
  --color-background-dark: #201d12;
  --font-display: 'Inter', sans-serif;
}

:root {
  --background: #f8f7f6;
  --foreground: #36454F;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #201d12;
    --foreground: #f1f5f9;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
}

/* Sutra Citation line gradient */
.sutra-line {
  height: 1px;
  background: linear-gradient(90deg, #D4AF37 0%, rgba(212, 175, 55, 0) 100%);
}

/* Material Symbols config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.5);
}