/* ===== CSS Variables & Theme System ===== */

:root {
  /* Kopitiam Palette (Light Mode Default) */
  --bg: #F0EFEA;
  --bg-gradient: none;
  --nav: #F0EFEA;
  --card: #FFFFFF;
  --text: #191919;
  --muted: #66605B;
  --pill: #191919;
  --pill-text: #FFFFFF;
  --stroke: #D6D1CA;
  --shadow: none;
  --nav-shadow: none;
  --image-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --badge-bg: #E6E4DD;
  --badge-text: #191919;
  --tagline: #191919;
  --input-bg: #FFFFFF;
  --input-border: #D6D1CA;
  --input-text: #191919;
  --input-placeholder: #8C8C8C;

  --serif: "Libre Baskerville", serif;
  --sans: "Inter", sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
}

body[data-theme="dark"] {
  /* Dark Mode - deep warm charcoal/black */
  --bg: #141413;
  --bg-gradient: none;
  --nav: #141413;
  --card: #1F1F1E;
  --text: #F0EFEA;
  --muted: #9E9E99;
  --pill: #F0EFEA;
  --pill-text: #141413;
  --stroke: #333331;
  --shadow: none;
  --nav-shadow: none;
  --image-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --badge-bg: #2B2B29;
  --badge-text: #F0EFEA;
  --tagline: #F0EFEA;
  --input-bg: #1F1F1E;
  --input-border: #333331;
  --input-text: #F0EFEA;
  --input-placeholder: #666666;
}

/* ===== Global Resets ===== */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--text);
  background-color: var(--bg);
  transition: background-color 0.3s ease, color 0.3s ease;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ===== Animations ===== */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fade-delay-1 {
  animation-delay: 0.1s;
}

.fade-delay-2 {
  animation-delay: 0.2s;
}

.fade-delay-3 {
  animation-delay: 0.3s;
}

.fade-delay-4 {
  animation-delay: 0.4s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}