/* ============================================================
   HomeSignal — shared styles
   Design tokens, reset, base typography, nav, footer.
   Loaded on every page before the page-specific stylesheet.
   ============================================================ */

:root {
  --green: #1a6b3c;
  --green-light: #eaf3de;
  --green-mid: #97c459;
  --green-dark: #27500a;
  --green-text: #3b6d11;
  --text: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-secondary: #f9fafb;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 100px;

  /* shorthand aliases used by the community page */
  --gl: var(--green-light);
  --gm: var(--green-mid);
  --gd: var(--green-dark);
  --ts: var(--text-secondary);
  --tt: var(--text-tertiary);
  --bg2: var(--bg-secondary);
  --r: var(--radius);
  --rs: var(--radius-sm);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
a { text-decoration: none; }
input, button, textarea { font-family: inherit; outline: none; }
input:focus, textarea:focus { border-color: var(--green) !important; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  line-height: 1.6;
}

/* ---------- NAV (shared across all pages) ---------- */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 48px; border-bottom: 1px solid var(--border);
  background: var(--bg); position: sticky; top: 0; z-index: 100;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 34px; height: 34px; background: var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.logo-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-text { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.logo-text span { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; }
.nav-links a { color: var(--text-secondary); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.nav-actions { display: flex; gap: 10px; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 8px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; }
.btn-outline:hover { background: var(--bg-secondary); }
.btn-primary { background: var(--green); color: #fff; border: none; padding: 8px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-primary:hover { opacity: 0.9; }

/* ---------- FOOTER (shared across all pages) ---------- */
footer {
  padding: 32px 48px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; background: var(--bg-secondary);
}
.footer-left .logo-text { font-size: 15px; margin-bottom: 4px; }
.footer-tagline { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { font-size: 13px; color: var(--text-tertiary); }
.footer-links a:hover { color: var(--text); }