/* ==========================================================================
   Archistar Maps — shared design system
   Brand tokens lifted from the promotions site for visual consistency.
   Hand-written (no build step) so report pages stay easy to edit.
   ========================================================================== */
@import url('/assets/fonts/faces.css');

:root {
  /* Brand palette */
  --color-ink: #0d1e30;
  --color-navy: #0f2c4d;
  --color-primary: #1b8560;
  --color-primary-hover: #176b4a;
  --color-accent: #535eee;
  --color-neutral-500: #6b7280;
  --color-neutral-200: #e5e7eb;
  --color-neutral-100: #f3f4f6;
  --color-white: #fff;

  /* Signature wash gradient (from promotions bg-brand-wash) */
  --brand-wash: linear-gradient(105deg,#fff,#f0faf6 28%,#e8f8f0 44%,#dff0fc,#dde0f9 84%,#d6d9f7);

  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Lato', var(--font-body);

  --radius: 16px;         /* rounded-2xl — map shell, stat band */
  --radius-card: 12px;    /* rounded-xl — feature cards (website default) */
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(13,30,48,.06), 0 1px 3px rgba(13,30,48,.08);
  --shadow-md: 0 4px 12px rgba(13,30,48,.10), 0 12px 32px rgba(13,30,48,.10);
  --maxw: 80rem;          /* max-w-7xl */
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: #fff;            /* white by default; brand-wash is a band, not the page */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0; }
.font-display { font-family: var(--font-display); font-weight: 700; }

/* Signature brand gradients (from website src/index.css) ------------------ */
.bg-brand-wash { background-image: var(--brand-wash); }
.text-brand-gradient {
  background-image: linear-gradient(100deg, #2CA874, #535EEE);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #2CA874;
}

/* Layout helpers ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wrap { padding-inline: 2rem; } }
.stack > * + * { margin-top: var(--stack, 1rem); }
.muted { color: var(--color-neutral-500); }

/* Site header (logo only, matches promotions) ---------------------------- */
.site-header { padding: 1.75rem 0 0.5rem; }
.site-header img { height: 2rem; }

/* Pills / eyebrow --------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 999px;
  background: rgba(27,133,96,.10);
  color: var(--color-primary-hover);
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .75rem;
}

/* Cards ------------------------------------------------------------------- */
.card {
  display: block;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .flag { width: 1.5rem; height: 1.5rem; border-radius: 999px; object-fit: cover; margin-bottom: .75rem; }
.card-title { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-top: .5rem; }
.card-sub { display: block; color: var(--color-neutral-500); font-size: .9rem; margin-top: .35rem; line-height: 1.45; }

.grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 600; font-size: .95rem;
  padding: .7rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; color: var(--color-ink); border: 1px solid var(--color-neutral-200); }
.btn-ghost:hover { background: var(--color-neutral-100); }

.site-footer { padding: 3rem 0; color: var(--color-neutral-500); font-size: .85rem; }