/* ─── SHARED APP STYLES ───────────────────────────────────────
   Used by index.html, dashboard.html, profile.html.
   Page-specific styles remain in each file's <style> block.
   terms.html and privacy.html use styles.css (separate system).
─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:   #0d2e28;
  --deep:  #0e4f46;
  --teal:  #1a8878;
  --mid:   #2ab5a0;
  --pale:  #d8f0ec;
  --fog:   #f0faf8;
  --sand:  #f7f3ed;
  --white: #ffffff;
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  color: var(--ink);
}

/* ─── NAV ─────────────────────────────────────────────────── */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  background: rgba(247, 243, 237, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,136,120,0.12);
}

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.nav-logo img { height: 56px; width: auto; }

.nav-brand-stack { display: flex; flex-direction: column; gap: 2px; }
.nav-brand { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.nav-tagline { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); opacity: 0.75; }

/* Shared across dashboard + profile navs */
.nav-email { font-size: 13px; color: var(--teal); opacity: 0.7; }

.btn-logout {
  background: none; border: 1.5px solid rgba(26,136,120,0.3);
  border-radius: 4px; padding: 7px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--teal); cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-logout:hover { border-color: var(--teal); color: var(--ink); }

/* ─── RESPONSIVE NAV ──────────────────────────────────────── */

@media (max-width: 900px) {
  nav { padding: 16px 20px; }
}