:root {
  /* Primary Colors - Inspired by protein structures */
  --primary-blue: #2e86ab; /* DNA/RNA Blue */
  --primary-dark: #1a5276; /* Darker blue for emphasis */
  --secondary-teal: #17a2b8; /* Protein fold teal */
  --accent-purple: #7952b3; /* Protein structure purple */
  --accent-orange: #f77f00; /* Active site orange */

  /* Neutral Colors */
  --gray-900: #212529; /* Dark text */
  --gray-800: #343a40; /* Headers */
  --gray-700: #495057; /* Secondary text */
  --gray-600: #6c757d; /* Muted text */
  --gray-500: #adb5bd; /* Borders */
  --gray-400: #ced4da; /* Light borders */
  --gray-300: #dee2e6; /* Hover states */
  --gray-200: #e9ecef; /* Backgrounds */
  --gray-100: #f8f9fa; /* Light backgrounds */
  --white: #ffffff;

  /* Success/Warning/Error */
  --success: #28a745;
  --warning: #ffc107;
  --error: #dc3545;

  /* Background gradient for subtle depth */
  --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

body {
  font-family: 'Pretendard', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg-gradient);
  color: var(--gray-900);
  margin: 0;
  padding: 0;
}

.container {
  padding: 20px;
  margin-top: 56px;
  min-height: 100vh;
}

.breadcrumb {
  padding: 10px 20px;
  font-size: 14px;
  color: var(--gray-700);
}

.breadcrumb span {
  color: var(--primary-blue);
}