@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Brand colours (gold) — same in light + dark. Stored as RGB channels so
   Tailwind opacity utilities (bg-primary/20) work. Overridden by theme.js
   from /api/branding. Surface colours swap with the .dark class. */
:root {
  --c-primary: 184 155 99;     /* #B89B63 gold */
  --c-secondary: 17 17 17;     /* #111111 */
  --c-accent: 184 155 99;      /* #B89B63 gold */

  /* Light theme surfaces */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-2: #eceae4;
  --border: #e5e2dc;
  --text: #15140f;
  --text-soft: #33312c;
  --text-muted: #6f6b63;
}

html.dark {
  --c-secondary: 233 229 221; /* lighten the "ink" accent for dark surfaces */

  --bg: #14130f;
  --surface: #1f1d18;
  --surface-2: #2a2722;
  --border: #34302a;
  --text: #f3efe7;
  --text-soft: #d9d4cc;
  --text-muted: #a59f93;
}

.section-max-width,
.max-w-section {
  max-width: 1760px !important;
  margin-left: auto;
  margin-right: auto;
}

html, body { background: var(--bg); }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
}

/* App shell: fixed left sidebar (15rem) + sticky in-flow top bar.
   The top bar is sticky (not fixed), so page content always flows below it —
   no per-page top-padding needed and nothing can overlap it. */
@media (min-width: 1024px) {
  body { padding-left: 15rem; }
}
/* Clear the mobile bottom tab bar so content isn't hidden behind it. */
@media (max-width: 1023px) {
  body { padding-bottom: 4.5rem; }
}