/* Design System for Tu Vien Website - Minimalist Cosmic Split-Screen style */

:root {
  --color-bg: #050811;
  --color-bg-darker: #02040a;
  --color-text: #f3f4f6;
  --color-text-muted: #9ca3af;
  
  /* Gold color scheme matching the mobile app */
  --color-gold-light: #ffe5a8;
  --color-gold: #ffc56f;
  --color-gold-dark: #b8742e;
  --gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
  
  /* Purple color scheme matching the mobile app */
  --color-purple-light: #c7a2ff;
  --color-purple: #8b5cff;
  --color-purple-dark: #4d2ed8;
  --gradient-purple: linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-purple) 50%, var(--color-purple-dark) 100%);

  /* Border / Glassmorphism */
  --color-border: rgba(255, 255, 255, 0.05);
  --color-border-glow: rgba(255, 197, 111, 0.15);
  --glass-bg: rgba(10, 14, 26, 0.4);
  --glass-blur: blur(16px);
  
  /* Fonts */
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Playfair Display', serif;
  --font-mono: 'Courier New', Courier, monospace;
}

/* Base resets & scroll behavior */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Beautiful custom cosmic scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-darker);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 197, 111, 0.15);
  border-radius: 4px;
  border: 2px solid var(--color-bg-darker);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}