/* =========================================================
   Greenleaf LTD — base.css
   Shared tokens + resets. Load this on every page, before
   any section-specific stylesheet (header.css, hero.css, etc).
   ========================================================= */

:root {
  --navy-900: #14245C;
  --navy-700: #1E3A8A;
  --paper: #F7F8FB;
  --white: #FFFFFF;
  --gold-600: #B8862E;
  --gold-100: #F4E9D6;
  --ink: #101828;
  --line: rgba(20, 36, 92, 0.10);

  --font-head: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --header-h: 84px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

/* ===================== SHARED BUTTONS ===================== */
/* Used by header.html and hero.html, so they live here rather
   than being duplicated in both section stylesheets. */
.btn-cta {
  display: inline-block;
  background: var(--gold-600);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: #9C7226;
}

/* Used by the header CTA specifically, for a shorter mobile label —
   see header.css's mobile media query for where this actually toggles. */
.cta-short { display: none; }

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--navy-900);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 22px;
  border: 1.5px solid var(--navy-900);
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: var(--navy-900);
  color: var(--white);
}

/* ===================== TEMP PLACEHOLDER ===================== */
/* Remove once the About section is added */
.placeholder-note {
  max-width: 1200px;
  margin: 48px auto;
  padding: 0 24px;
  font-family: var(--font-body);
  color: var(--navy-700);
  font-size: 0.95rem;
}