/* AskListing: Master Brand tokens + typography.
   Utah Civic Navy / Royal Blue / Signal Red / Gold / Coral / Cloud.
   Synthesized from Utah's largest brokerages; copies none of them.
   Geist (headlines + UI/body) + Geist Mono (numerals/code).
   Dark, flat, high-contrast, no gradients. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* Brand primitives */
  --navy: #0b1220;
  --royal: #1e5bd6;
  --signal: #e23b3b;
  --gold: #c9a24b;
  --coral: #ff6b5c;
  --cloud: #eaf0fa;
  --white: #ffffff;

  /* Legacy aliases (deprecated) remapped to the new palette so any stray
     reference still renders an on-brand color. Prefer the semantic tokens. */
  --wasabi: #1e5bd6;     /* was green; now royal */
  --persimmon: #e23b3b;  /* now signal red */
  --violet: #ff6b5c;     /* AI now coral */
  --teal: #1e5bd6;       /* success now royal */
  --amber: #c9a24b;      /* pending now gold */

  /* Semantic tokens (shared across all surfaces) */
  --bg: #0b1220;
  --void: #0b1220;
  --soft: #0f1a33;
  --panel: #15203a;
  --panel-2: #1c2a48;
  --line: #2a3a5c;
  --ink: #eaf0fa;
  --muted: #93a1bc;

  --brand: #1e5bd6;       /* primary / CTA / active / wordmark */
  --brand-ink: #ffffff;   /* text on royal / red / coral fills */
  --gold-ink: #23200c;    /* dark text on gold fills */
  --brand2: #e23b3b;      /* ALERTS ONLY: error / sold / hot */

  /* Status colors */
  --ok: #1e5bd6;          /* active = royal (solid) */
  --success: #1e5bd6;     /* confirmed / done = royal (use a ghost/tint to distinguish from active) */
  --warn: #e23b3b;
  --hot: #e23b3b;
  --warm: #c9a24b;        /* warm lead / pending = gold */
  --link: #c9a24b;        /* content/inline links = gold; utility links use --muted */
  --ai: #ff6b5c;          /* AI / bot = coral */
  --bot: #241413;         /* AI chat bubble background (coral-dark) */
  --brand-bubble: #1e5bd6;/* buyer SMS/chat bubble = royal */

  --font-head: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

html,
body {
  background: var(--void);
}
body {
  font-family: var(--font-body);
  color: var(--ink);
}
h1, h2 {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.5px;
}
h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Wordmark */
.brandmark {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.4px;
}
.brandmark .ll {
  color: var(--ink);
}

/* "Ask" chat bubble in the wordmark */
.ab {
  position: relative;
  display: inline-block;
  background: var(--brand2);
  color: var(--white);
  font-weight: 700;
  border-radius: 8px;
  padding: 1px 9px 2px;
}
.ab::after {
  content: "";
  position: absolute;
  left: 5px;
  bottom: -11px;
  width: 13px;
  height: 13px;
  background: var(--brand2);
  clip-path: polygon(4px 0, 13px 0, 0 100%);
}
.ab + .ll {
  margin-left: -4px;
}

/* Shared responsive layer (applies to every surface that loads brand.css).
   Keep page-specific breakpoints in each page; these are the cross-cutting
   fixes every page needs on a phone. */
@media (max-width: 640px) {
  /* Wide data tables scroll horizontally inside themselves instead of
     forcing the whole page sideways. display:block turns the table into its
     own scroll container, so no wrapper element is needed (covers tables
     rendered into the DOM by JS too). */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* iOS Safari zooms the page when a focused form control has a font smaller
     than 16px. Bump controls to 16px on small screens to stop the zoom. */
  input,
  select,
  textarea {
    font-size: 16px;
  }
}