frontend/src/styles/globals.css

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

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

:root {
  /* Light Pastel Brown Theme */
  --light-bg-primary: #F7F3F0;
  --light-bg-secondary: #F0E6D6;
  --light-bg-tertiary: #E8DDD0;
  --light-text-primary: #3C2E26;
  --light-text-secondary: #5D4E42;
  --light-text-muted: #8B7355;
  --light-accent: #D4A574;
  --light-accent-hover: #C69963;
  --light-border: #DDD0BB;
  --light-shadow: rgba(60, 46, 38, 0.1);

  /* Dark Pastel Brown Theme */
  --dark-bg-primary: #1F1B17;
  --dark-bg-secondary: #2A241E;
  --dark-bg-tertiary: #342D25;
  --dark-text-primary: #F5F1EC;
  --dark-text-secondary: #E0D5C7;
  --dark-text-muted: #B8A690;
  --dark-accent: #D4A574;
  --dark-accent-hover: #E6B885;
  --dark-border: #3F362B;
  --dark-shadow: rgba(0, 0, 0, 0.3);

  /* Default to dark theme */
  --background: var(--dark-bg-primary);
  --background-secondary: var(--dark-bg-secondary);
  --background-tertiary: var(--dark-bg-tertiary);
  --foreground: var(--dark-text-primary);
  --foreground-secondary: var(--dark-text-secondary);
  --foreground-muted: var(--dark-text-muted);
  --accent: var(--dark-accent);
  --accent-hover: var(--dark-accent-hover);
  --border: var(--dark-border);
  --shadow: var(--dark-shadow);
}

@media (prefers-color-scheme: light) {
  :root {
    --background: var(--light-bg-primary);
    --background-secondary: var(--light-bg-secondary);
    --background-tertiary: var(--light-bg-tertiary);
    --foreground: var(--light-text-primary);
    --foreground-secondary: var(--light-text-secondary);
    --foreground-muted: var(--light-text-muted);
    --accent: var(--light-accent);
    --accent-hover: var(--light-accent-hover);
    --border: var(--light-border);
    --shadow: var(--light-shadow);
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-bricolage-grotesque), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

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

/* Selection color */
::selection {
  background: var(--accent);
  color: var(--background);
}

/* Focus styles */
*:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Performance optimizations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Glass morphism effect */
.glass {
  background: rgba(212, 165, 116, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 165, 116, 0.2);
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, var(--background) 0%, var(--background-secondary) 100%);
}

.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}