/*
 * KnockTurf by BTbright — brand tokens.
 *
 * This file is the ONLY place brand hex values are defined. Reference the
 * custom properties everywhere else; do not hardcode these colours in
 * templates, component CSS, or JavaScript.
 *
 * See docs/BRAND.md for the rules behind these decisions.
 */

/* ── Self-hosted Inter (SIL Open Font License 1.1) ──────────────────────────
 * Self-hosted deliberately: hotlinking Google Fonts adds a third-party request
 * on every page load and a privacy question we do not want to answer for a
 * political client. Licence text ships at static/fonts/Inter-LICENSE.txt.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Inter-Regular.3875f8357497.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Inter-Medium.7b7f3cfa2944.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Inter-SemiBold.b72fa2728a8e.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Inter-Bold.66894432e7ff.woff2") format('woff2');
}

:root {
  /* ── Palette ──────────────────────────────────────────────────────────── */
  --brand-night: #12233A;  /* primary: headers, nav, buttons, login bg */
  --brand-lamp:  #F2A73B;  /* accent: LOGO ONLY — see the constraint below */
  --brand-paper: #F7F5F0;  /* light surface, page background */
  --brand-slate: #6B7B8C;  /* secondary text, borders, muted UI */

  /*
   * HARD CONSTRAINT ON --brand-lamp.
   *
   * The map uses colour semantically: gray unassigned, yellow regional, green
   * assigned, blue member, orange multi-assignment, red no-solicitation. Amber
   * collides with the yellow and orange map states, so a canvasser could read
   * brand chrome as map data.
   *
   * Use --brand-lamp in the logo and NOWHERE ELSE. All UI chrome — buttons,
   * links, active nav, focus rings — uses --brand-night and --brand-slate.
   * Never introduce amber into a component that appears near the map.
   */

  /* ── Derived UI tokens (composed from the four above) ─────────────────── */
  --brand-night-hover:  #1B3355;
  --brand-ink:          var(--brand-night);
  --brand-muted:        var(--brand-slate);
  --brand-surface:      var(--brand-paper);
  --brand-border:       #D8DDE3;
  --brand-focus-ring:   var(--brand-night);

  --brand-radius:       12px;
  --brand-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
}

/* ── Primitives ──────────────────────────────────────────────────────────── */

.brand-font { font-family: var(--brand-font); }

/* Wordmark. The capital S is a fixed brand rule — never render the product
 * name all-lowercase or all-caps. See docs/BRAND.md. */
.brand-wordmark {
  font-family: var(--brand-font);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand-night);
}
.brand-wordmark--reverse { color: var(--brand-paper); }

.brand-btn {
  font-family: var(--brand-font);
  font-weight: 500;
  background: var(--brand-night);
  color: var(--brand-paper);
  border: none;
  border-radius: var(--brand-radius);
  padding: 12px 22px;
  cursor: pointer;
  transition: background .15s ease;
}
.brand-btn:hover { background: var(--brand-night-hover); }

.brand-btn--secondary {
  background: transparent;
  color: var(--brand-night);
  border: 1px solid var(--brand-border);
}
.brand-btn--secondary:hover { background: rgba(18, 35, 58, .06); }

/* Visible focus for keyboard users, in navy rather than amber. */
.brand-btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-focus-ring);
  outline-offset: 2px;
}

.brand-card {
  background: var(--brand-paper);
  border-radius: var(--brand-radius);
  border: 1px solid var(--brand-border);
}

/* ── Login screen ────────────────────────────────────────────────────────── */

.brand-login {
  min-height: 100vh;
  background-color: var(--brand-night);
  font-family: var(--brand-font);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/*
 * Optional texture: an abstract street-grid, kept under 8% opacity per the
 * brand rules. No photography anywhere in product chrome.
 */
.brand-login--grid {
  background-image:
    linear-gradient(to right,  rgba(107, 123, 140, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107, 123, 140, .07) 1px, transparent 1px);
  background-size: 56px 56px;
}

.brand-login__logo { width: 240px; max-width: 70vw; margin-bottom: 28px; }

.brand-login__card {
  background: var(--brand-paper);
  border-radius: var(--brand-radius);
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

/* ── App header ──────────────────────────────────────────────────────────── */

.brand-header {
  background: var(--brand-night);
  color: var(--brand-paper);
  font-family: var(--brand-font);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}
.brand-header__logo { height: 34px; width: auto; }

/* Stacked lockup on narrow screens, horizontal above. */
.brand-header__logo--stacked { display: none; }
@media (max-width: 480px) {
  .brand-header__logo--horizontal { display: none; }
  .brand-header__logo--stacked { display: block; height: 52px; }
}

/* ── Avatars ─────────────────────────────────────────────────────────────── */

/* Initials on a deterministic colour derived from the user id — no upload
 * flow, which would bring moderation and storage problems. */
.brand-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-family: var(--brand-font);
  font-weight: 600;
  font-size: 13px;
  color: var(--brand-paper);
  user-select: none;
}

/* ── Empty states ────────────────────────────────────────────────────────── */

.brand-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--brand-slate);
  font-family: var(--brand-font);
}
.brand-empty__art { width: 120px; height: 120px; margin: 0 auto 16px; display: block; }
.brand-empty__title { color: var(--brand-night); font-weight: 600; margin: 0 0 6px; }
.brand-empty__body { margin: 0; font-size: 14px; }

/* ── Banners (icon + text, no illustration) ──────────────────────────────── */

.brand-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--brand-font);
  font-size: 14px;
}
.brand-banner--error   { background: #FBEAE8; color: #8A241E; border: 1px solid #E7B7B2; }
.brand-banner--offline { background: #EEF1F4; color: var(--brand-night); border: 1px solid var(--brand-border); }