/* Main CSS - Import all stylesheets */
@import url('base.css');
@import url('components.css');
@import url('themes.css');

/* Root variables for consistent theming */
:root {
  /* Chinese Traditional Color Palette */
  --primary: #39506B;
  --secondary: #D4956B;
  --accent: #4A6741;
  --accent-light: #5A7A50;
  --accent-gradient: linear-gradient(135deg, #39506B 0%, #D4956B 50%, #4A6741 100%);
  
  /* Text Colors */
  --text-primary: #2A3D52;
  --text-secondary: #39506B;
  --text-light: #FFFFFF;
  --text-muted: #4A6280;
  
  /* Background Colors */
  --bg-light: #F5F3F0;
  --bg-secondary: rgba(217, 149, 107, 0.1);
  --bg-tertiary: #F1F5F9;
  --bg-dark: #2A3D52;
  --bg-gradient: linear-gradient(135deg, #39506B 0%, #D4956B 50%, #4A6741 100%);
  --bg-hero: linear-gradient(135deg, #39506B 0%, #D4956B 50%, #4A6741 100%);
  
  /* Shadows */
  --shadow-light: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-medium: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-large: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.04);
  
  /* Border Radius */
  --border-radius: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  
  /* Transitions */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Global font settings */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background: var(--bg-gradient);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  min-height: 100vh;
  color: var(--text-primary);
  scroll-behavior: smooth;
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}