/* Shared styles for the public home page (/): tokens, header, footer.
   The app pages (login, activate, console, admin) don't use this file.

   Palette: deep brown, cream, copper. The header and footer are always deep
   brown, so they look the same in light and dark mode. */

:root {
  --brand-deep:   #2a1508;
  --brand-deeper: #1c0e05;
  --brand-cream:  #f5ede3;
  --brand-tan:    #e8c9a8;
  --brand-sand:   #d4b8a0;
  --brand-copper: #c47a3a;
  --brand-mute:   #8a6248;

  /* Learn pages, light */
  --page:   #f8f3ec;
  --card:   #fffaf4;
  --ink:    #2a1508;
  --muted:  #6b4c35;
  --line:   rgba(42, 21, 8, .14);
  --band:   rgba(42, 21, 8, .06);
  --accent: #9a5520;   /* copper darkened for text contrast on cream */

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:   #1c0e05;
    --card:   #2a1508;
    --ink:    #f5ede3;
    --muted:  #d4b8a0;
    --line:   rgba(245, 237, 227, .14);
    --band:   rgba(245, 237, 227, .07);
    --accent: #e0a065;
  }
}

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  background: var(--brand-deep);
  border-bottom: 1px solid rgba(245, 237, 227, .08);
  padding-top: env(safe-area-inset-top, 0px);
}
.site-header .inner {
  max-width: 1040px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header .home {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-cream); text-decoration: none;
  font: 500 16px/1 var(--font); letter-spacing: -.2px;
}
.site-header .home img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.site-header .home span b { color: var(--brand-copper); font-weight: 500; }
.site-header nav a {
  color: var(--brand-tan); text-decoration: none;
  font: 500 15px/1 var(--font); padding: 10px 12px; border-radius: 6px;
}
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--brand-cream); background: rgba(245, 237, 227, .08); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-deep);
  color: var(--brand-sand);
  font: 400 14px/1.6 var(--font);
  padding: 28px 0 calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(245, 237, 227, .08);
}
.site-footer .inner {
  max-width: 1040px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center;
}
.site-footer a { color: var(--brand-tan); text-decoration: none; }
.site-footer a:hover { color: var(--brand-cream); text-decoration: underline; }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; }