/* 
 * Main CSS: Design Tokens & Base Styles
 */

:root {
  --primary: #fc4a4a;
  --primary-dark: #cc0000;
  --bg-light: #ffffff;
  --bg-alt: #f8f8f8;
  --text-dark: #333333;
  --text-gray: #666666;
  --text-white: #ffffff;
  --link-blue: #0066cc;
  --error-color: #cc0000;
  --success-color: #00aa44;
  --border-color: #dddddd;
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 6px 18px rgba(0, 0, 0, 0.12);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1200px;
  --header-height: 80px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-dark);
  line-height: 1.6;
  background-color: var(--bg-light);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  line-height: 1.25;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title h2 {
  font-size: 2.5rem;
  color: var(--text-dark);
}

.section-title p {
  color: var(--text-gray);
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.1rem;
}

/* Common Layouts */
.grid {
  display: grid;
  gap: 2rem;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate {
  animation: fadeIn 0.8s forwards ease-out;
}

/* Responsive Font Sizes */
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .section-title h2 {
    font-size: 1.75rem;
  }
}