/* ── Theme Variables ── */
:root {
  --bg: 250 250 248;
  --bg-card: 255 255 255;
  --fg: 28 28 28;
  --fg-muted: 113 112 110;
  --border: 232 229 223;
  --accent: 184 92 56;
  --accent-dark: 154 69 35;
}

.dark {
  --bg: 15 15 15;
  --bg-card: 26 26 24;
  --fg: 232 228 222;
  --fg-muted: 144 140 134;
  --border: 42 42 39;
  --accent: 212 128 94;
  --accent-dark: 184 92 56;
}

/* ── Base ── */
body {
  background-color: rgb(var(--bg));
  color: rgb(var(--fg));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Material Symbols ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── Editorial Grid (1fr 2fr, collapses on mobile) ── */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.75rem;
}
@media (max-width: 768px) {
  .editorial-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Metric Card Hover ── */
.metric-card-hover {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.metric-card-hover:hover {
  transform: scale(1.02);
}

/* ── Details/Accordion marker removal ── */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }

/* ── Hero Animations ── */
@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

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

@keyframes lineGrow {
  from { width: 0; }
  to { width: 120px; }
}

@keyframes scrollPulse {
  0% { transform: translateY(-8px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(32px); opacity: 0; }
}

.hero-title {
  animation: titleReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.hero-subtitle {
  animation: subtitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.hero-line {
  animation: lineGrow 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

.scroll-pulse {
  animation: scrollPulse 2s ease-in-out infinite;
}