@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --color-sand: #FAF7F2;
  --color-sand-warm: #F4EFE6;
  --color-sand-muted: #EBE4D8;
  --color-sand-card: #FFFFFF;
  --color-espresso: #1E1612;
  --color-espresso-deep: #130E0B;
  --color-espresso-light: #3A2F28;
  --color-espresso-muted: #6B5E55;
  --color-terracotta: #C45525;
  --color-terracotta-hover: #A8441A;
  --color-terracotta-soft: #FAECE6;
  --color-dusty-blue: #4A6B7C;
  --color-dusty-blue-soft: #EDF3F6;
  --color-soft-olive: #637554;
  --color-soft-olive-soft: #EEF3E9;
  --color-border: #E5DFD3;
  --color-border-dark: #382D25;

  --color-primary: #C45525;
  --color-primary-rgb: 196, 85, 37;
  --color-primary-dark: #A8441A;
  --color-secondary: #4A6B7C;
  --color-hover: #A8441A;
  --color-accent: #637554;
  --color-bg: #FAF7F2;

  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
}

html {
  font-family: var(--font-main);
  background-color: var(--color-sand);
  color: var(--color-espresso);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-sand);
  color: var(--color-espresso);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-serif, .editorial-heading {
  font-family: var(--font-heading) !important;
  color: var(--color-espresso);
  letter-spacing: -0.015em;
}

.font-sans, .editorial-sans {
  font-family: var(--font-main) !important;
}

/* Editorial design utility tokens */
.bg-sand { background-color: var(--color-sand); }
.bg-sand-warm { background-color: var(--color-sand-warm); }
.bg-sand-muted { background-color: var(--color-sand-muted); }
.bg-espresso { background-color: var(--color-espresso); color: #F5EFE6; }
.bg-espresso-deep { background-color: var(--color-espresso-deep); color: #F5EFE6; }
.bg-terracotta { background-color: var(--color-terracotta); color: #FFFFFF; }
.bg-dusty-blue { background-color: var(--color-dusty-blue); color: #FFFFFF; }
.bg-soft-olive { background-color: var(--color-soft-olive); color: #FFFFFF; }

.text-espresso { color: var(--color-espresso); }
.text-espresso-muted { color: var(--color-espresso-muted); }
.text-terracotta { color: var(--color-terracotta); }
.text-dusty-blue { color: var(--color-dusty-blue); }
.text-soft-olive { color: var(--color-soft-olive); }

.border-sand-border { border-color: var(--color-border); }
.border-terracotta { border-color: var(--color-terracotta); }
.border-dusty-blue { border-color: var(--color-dusty-blue); }

.editorial-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
}

.numeral-accent {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  color: var(--color-terracotta);
  line-height: 1;
}

/* Subtle editorial dividers */
.editorial-hr {
  height: 1px;
  background-color: var(--color-border);
  border: none;
  margin: 2rem 0;
}

/* Clean button aesthetics */
.btn-editorial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-editorial-primary {
  background-color: var(--color-terracotta);
  color: #FFFFFF !important;
}
.btn-editorial-primary:hover {
  background-color: var(--color-terracotta-hover);
  transform: translateY(-1px);
}

.btn-editorial-outline {
  border: 1px solid var(--color-espresso);
  color: var(--color-espresso) !important;
  background-color: transparent;
}
.btn-editorial-outline:hover {
  background-color: var(--color-espresso);
  color: #FFFFFF !important;
}

.btn-editorial-blue {
  background-color: var(--color-dusty-blue);
  color: #FFFFFF !important;
}
.btn-editorial-blue:hover {
  background-color: #3B5868;
}

/* Tag Badges */
.badge-olive {
  background-color: var(--color-soft-olive-soft);
  color: var(--color-soft-olive);
  border: 1px solid rgba(99, 117, 84, 0.2);
}
.badge-blue {
  background-color: var(--color-dusty-blue-soft);
  color: var(--color-dusty-blue);
  border: 1px solid rgba(74, 107, 124, 0.2);
}
.badge-terracotta {
  background-color: var(--color-terracotta-soft);
  color: var(--color-terracotta);
  border: 1px solid rgba(196, 85, 37, 0.2);
}

/* Sticky top header styling */
header {
  background-color: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

/* Override outdated generic classes if any remain */
.text-emerald-600, .text-green-600, .text-teal-600 { color: var(--color-terracotta) !important; }
.bg-emerald-600, .bg-green-600, .bg-teal-600 { background-color: var(--color-terracotta) !important; }