/* ==========================================================================
   Haven Access brand skin for the "Who represents me?" lookup tool.

   The tool ships with its own style.css (blue, rounded, soft shadows). Rather
   than fork it — app.js and style.css should stay upstream-mergeable so
   `python build_data.py` and future tool updates drop straight in — this file
   loads AFTER style.css and only retokenizes it.

   Two things happen here:
     1. Re-point the tool's own custom properties at Haven Access tokens.
     2. Restyle the page chrome (header, back link, footer) to match the site.

   Everything else — cards, buttons, the QR/vCard/share actions — inherits the
   new values automatically. Do not edit style.css or app.js to change colours;
   change them here.
   ========================================================================== */

@import url("../css/tokens/fonts.css");
@import url("../css/tokens/colors.css");

:root {
  /* Poster cream page, white cards, warm ink text — never blue-grey. */
  --bg: var(--paper-100);
  --card: var(--white);
  --ink: var(--ink-800);
  --ink-soft: var(--ink-500);

  /* Spray green is the primary. The tool used a blue --accent throughout. */
  --accent: var(--green-600);
  --accent-ink: var(--paper-100);

  --line: var(--ink-200);

  /* The brand is posted paper and painted walls: square-ish corners, and the
     offset hard "paste" shadow instead of a soft blue-grey lift. */
  --radius: 6px;
  --shadow: 4px 4px 0 var(--ink-900);
}

/* The tool ships a dark-mode block that re-points these to blues. Haven Access
   has no dark mode — one cream page and one green field — so hold the light
   palette even when the OS asks for dark, rather than shipping a half-branded
   dark theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--paper-100);
    --card: var(--white);
    --ink: var(--ink-800);
    --ink-soft: var(--ink-500);
    --accent: var(--green-600);
    --line: var(--ink-200);
    --shadow: 4px 4px 0 var(--ink-900);
  }
}

body {
  font-family: var(--font-body);
}

/* ---- Page chrome -------------------------------------------------------- */

.ha-lookup-back {
  display: block;
  background: var(--ink-900);
  color: var(--gold-400);
  text-decoration: none;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 16px;
}
.ha-lookup-back:hover { color: var(--paper-100); }

/* Flat green field, no gradient — the brand has no gradient backgrounds. */
.site-header {
  background: var(--green-900);
  border-bottom: 3px solid var(--ink-900);
  color: var(--paper-100);
  padding: 24px 16px 20px;
}

.ha-lookup-logo {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto 10px;
}

/* Poster block caps, always uppercase. */
.site-header h1 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: 1.75rem;
  color: var(--paper-100);
}

.tagline {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .8rem;
  opacity: 1;
  color: var(--gold-400);
}

.site-footer {
  border-top: 3px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--ink-200);
}
.site-footer a { color: var(--gold-400); }

/* The privacy note is load-bearing here — this tool sends an address to a
   third party, so it should read as a deliberate statement, not fine print. */
.privacy-note {
  background: var(--green-50);
  border: 2px solid var(--ink-900);
  border-radius: var(--radius-sm, 3px);
  padding: 10px 12px;
  color: var(--ink-800);
}

/* Minimum 48px tap targets — this audience is on phones. */
#search-btn,
#locate-btn {
  min-height: 48px;
  font-family: var(--font-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}