/*
 * Idela — shared design system
 * Import this file in every page: <link rel="stylesheet" href="shared.css">
 * All pages should remove their local copies of these variables and base styles
 */

/* ── DESIGN TOKENS ── */
:root {
  --ink: #0c0b09;
  --ink-2: #1c1a17;
  --ink-soft: #4a4640;
  --ink-muted: #7a746c;
  --paper: #f5f3ee;
  --paper-2: #ede9e2;
  --paper-3: #e2ddd5;
  --rule: #d8d3cb;
  --forest: #0b3520;
  --forest-2: #124d2e;
  --forest-mid: #1c7046;
  --forest-light: #29975e;
  --forest-pale: #e4f2eb;
  --forest-pale-2: #cce8d8;
  --amber: #7a4f0a;
  --amber-mid: #a86d10;
  --amber-light: #d4921a;
  --amber-pale: #fdf3dc;
  --serif: "Fraunces", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── NAVIGATION ── */
.idela-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  padding: 0 2.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.idela-nav .nav-logo {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.idela-nav .nav-logo img { height: 28px; display: block; }
.idela-nav .nav-logo .wordmark { color: #fff; }
.idela-nav .nav-logo .wordmark span { color: var(--forest-light); }
.idela-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.idela-nav .nav-links a {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color .15s;
}
.idela-nav .nav-links a:hover { color: rgba(255,255,255,.9); }
.idela-nav .nav-links a.active { color: #fff; }
.idela-nav .nav-new {
  font-size: 9px;
  font-weight: 600;
  background: var(--forest-mid);
  color: #fff;
  padding: 1px 6px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: middle;
}
.idela-nav .nav-cta {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  padding: 7px 18px;
  border-radius: 3px;
  text-decoration: none;
  transition: background .15s;
}
.idela-nav .nav-cta:hover { background: var(--paper); }

/* ── FOOTER ── */
.idela-footer {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.idela-footer .footer-logo {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.idela-footer .footer-logo img { height: 20px; display: block; opacity: .4; }
.idela-footer .footer-logo .wordmark span { color: var(--forest-light); }
.idela-footer .footer-meta {
  font-size: 11px;
  color: rgba(255,255,255,.2);
  line-height: 1.65;
}
.idela-footer .footer-meta a {
  color: rgba(255,255,255,.3);
  text-decoration: none;
  transition: color .15s;
}
.idela-footer .footer-meta a:hover { color: rgba(255,255,255,.6); }
.idela-footer .footer-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.idela-footer .fb {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 7px;
  border-radius: 2px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.3);
}
.idela-footer .fb.g {
  background: rgba(41,151,94,.15);
  color: rgba(100,205,150,.7);
}

/* ── TYPOGRAPHY ── */
.serif { font-family: var(--serif); }
.kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .65rem;
  display: block;
}
.kicker-light {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--forest-light);
  margin-bottom: .65rem;
  display: block;
}

/* ── BUTTONS ── */
.btn-forest {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--forest);
  padding: 11px 24px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.btn-forest:hover { background: var(--forest-2); }
.btn-white {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  padding: 11px 24px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}
.btn-white:hover { background: var(--paper); }
.btn-ghost {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  padding: 11px 24px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.15);
  text-decoration: none;
  display: inline-block;
  transition: all .15s;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* ── SECTION WRAPPER ── */
.section-wrap { max-width: 900px; margin: 0 auto; }

/* ── RESPONSIVE: MOBILE NAV ── */
@media (max-width: 700px) {
  .idela-nav .nav-links { display: none; }
  .idela-nav { padding: 0 1.5rem; }
  .idela-footer { padding: 1.5rem; }
}

/* ── ANIMATIONS ── */
@keyframes appear {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}