/* ReWild — design tokens (forked from EcoSwap maquette, refined) */
:root {
  --bg: #fef9f1;
  --surface: #fef9f1;
  --surface-low: #f8f3eb;
  --surface: #f2ede5;
  --surface-container: #f2ede5;
  --surface-high: #ece8e0;
  --surface-highest: #e7e2da;
  --on-surface: #1d1c17;
  --on-surface-variant: #414844;
  --outline: #727974;
  --outline-variant: #c1c8c2;
  --primary: #022619;
  --primary-container: #1a3c2e;
  --on-primary: #ffffff;
  --on-primary-container: #82a794;
  --secondary: #39684b;
  --secondary-container: #bbefca;
  --on-secondary-container: #205035;
  --tertiary-fixed: #bceecb;
  --on-tertiary-fixed-variant: #224f36;
  --inverse-primary: #aacfbb;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --success: #2f7d52;

  --shadow-card: 0 1px 2px rgba(26,60,46,.04), 0 4px 16px rgba(26,60,46,.05);
  --shadow-elev: 0 8px 32px rgba(26,60,46,.10);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
.font-display { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -0.02em; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-feature-settings: "ss02"; }

/* Type scale */
.t-hero { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 56px; line-height: 1.05; letter-spacing: -0.035em; }
.t-h1 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; }
.t-h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
.t-h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; }
.t-body { font-size: 15px; line-height: 1.55; }
.t-body-lg { font-size: 17px; line-height: 1.6; }
.t-caption { font-size: 13px; line-height: 1.4; color: var(--on-surface-variant); }
.t-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all 0.18s ease; font-family: inherit; white-space: nowrap; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: #0a3a26; transform: translateY(-1px); }
.btn-secondary { background: var(--surface-low); color: var(--primary); border-color: var(--outline-variant); }
.btn-secondary:hover { background: var(--surface-high); }
.btn-ghost { background: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--surface-low); }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* Material symbols sizing baseline */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; user-select: none; }
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Card */
.card {
  background: #ffffff;
  border: 1px solid rgba(193, 200, 194, 0.4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-elev); }

/* Badges & chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--surface-low); color: var(--on-surface-variant);
  border: 1px solid var(--outline-variant);
  cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.chip:hover { background: var(--surface-high); }
.chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.chip-eco { background: var(--secondary-container); color: var(--on-secondary-container); border-color: rgba(63,110,81,0.2); }

/* Inputs */
.input, .textarea, .select {
  width: 100%; padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  font-size: 14px; font-family: inherit;
  color: var(--on-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(57,104,75,0.12); }
.textarea { min-height: 120px; resize: vertical; }

/* Scrollbar suppression on horizontal carousels */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Subtle striped placeholder used inside SVGs */
.placeholder-stripes {
  background: repeating-linear-gradient(135deg,
    rgba(2,38,25,.04) 0 8px, rgba(2,38,25,.07) 8px 16px);
}

/* Page transitions */
.page-fade { animation: pageFade 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Sticky top nav */
.nav-top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(254, 249, 241, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(193, 200, 194, 0.3);
}

/* Eco badge */
.eco-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; font-weight: 500;
  background: rgba(187, 239, 202, 0.7);
  color: var(--on-secondary-container);
  border: 1px solid rgba(63,110,81,0.15);
}

/* Hide eco badges when tweak is off */
body[data-eco-badges="off"] .eco-badge,
body[data-eco-badges="off"] [data-eco-only] {
  display: none !important;
}

/* Universe scroll snap */
.snap-x { scroll-snap-type: x mandatory; }
.snap-start { scroll-snap-align: start; }

/* Link reset */
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }