/* SalePage theme (salepage.ca). Loaded after server/public/theme/tokens.css when
   THEME=salepage. Colors, fonts and logo taken from the SalePage site mockup
   (salepage.ca). Fonts and logo are
   served from themes/salepage/ at /_theme/brand/ (admin CSP allows 'self' only).
   Fonts: Figtree and Bricolage Grotesque, SIL Open Font License 1.1. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/_theme/brand/fonts/figtree-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/_theme/brand/fonts/bricolage-grotesque-latin.woff2) format("woff2");
}

:root {
  color-scheme: light;

  /* SalePage palette */
  --sp-ink: #141415;
  --sp-ink-2: #2a2a2e;
  --sp-muted: #5e5e64;
  --sp-soft: #8a8a90;
  --sp-line: #e7e4dc;
  --sp-mist: #f5f4f0;
  --sp-cream: #fff8dc;
  --sp-yellow: #ffcc00;
  --sp-yellow-d: #ebb800;

  /* Surfaces */
  --bg: var(--sp-mist);
  --bg-deep: #edebe5;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #efede7;
  --surface-open: var(--sp-cream);
  --surface-selected: #fff3c2;
  --surface-sunk: #f0eee8;
  /* Borders */
  --border: var(--sp-line);
  --border-strong: #d9d5ca;
  --border-hover: #b9b4a8;
  /* Text */
  --text: var(--sp-ink);
  --text-strong: var(--sp-ink);
  --text-soft: var(--sp-ink-2);
  --text-soft-2: var(--sp-ink-2);
  --text-muted: var(--sp-muted);
  --text-faint: var(--sp-soft);
  --link: #7a5c00;
  /* Accent: yellow with ink text, as on the site */
  --accent: var(--sp-yellow);
  --on-accent: var(--sp-ink);
  /* Status and chips (dark text on light tints) */
  --ok: #1e7a3c;
  --ok-bg: #e3f5e8;
  --ok-bg-2: #d5efdc;
  --warn: #8a6400;
  --warn-2: #8a6400;
  --warn-bg: #fff3c2;
  --warn-bg-2: #fff3c2;
  --danger: #c0362c;
  --danger-bg: #fde8e6;
  --error: #c0362c;
  --info: #2f5bd3;
  --info-2: #2f5bd3;
  --info-bg: #e6edff;
  --person: #6b3fc0;
  --person-2: #7c4ddb;
  --person-bg: #efe7ff;
  --accepted: #0e7c72;
  --accepted-bg: #ddf4f1;
  --status-new: var(--sp-yellow-d);
  /* Shape: the site uses 16px cards */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  /* Type */
  --font: "Figtree", system-ui, sans-serif;
  /* Shadows and overlays */
  --shadow: 0 18px 40px -22px rgba(20, 20, 21, .35);
  --shadow-3: 0 18px 40px -22px rgba(20, 20, 21, .35);
  --shadow-2: 0 0 0 1px var(--sp-yellow-d);
  --overlay-6: rgba(20, 20, 21, .45);
  /* One-off colors (see tokens.css for where each is used) */
  --c-142017: #e3f5e8;  /* new-user password box */
  --c-2f5a39: #9fd3ae;
  --c-cfe9d5: #1e5a30;
  --c-151b2a: var(--sp-cream);  /* board column on drag over */
  --c-171a20: #faf9f6;  /* mail list hover */
  --c-1e2128: var(--sp-line);
  --c-17201a: var(--sp-cream);  /* review tips */
  --c-c9d3bd: var(--sp-ink-2);
  --c-1f1c12: var(--sp-cream);  /* passcode code */
  --c-20232b: var(--sp-mist);
  --c-2a2412: #fff3c2;  /* banners */
  --c-3a3218: #f0d670;
  --c-f0d58a: #6b4e00;
  --c-2a2d35: #efede7;  /* mockup / declined chips */
  --c-b9bdc7: var(--sp-muted);
  --c-2a2e37: var(--sp-line);  /* board cards */
  --c-2b5b55: #9fd8d0;  /* review send bar */
  --c-c9f2ec: #0e5c55;
  --c-9fe6dd: #0e5c55;
  --c-3a4664: #ffe780;
  --c-7d8290: var(--sp-soft);
  --c-9fd0ff: #7a5c00;
  --c-b9c9ff: var(--sp-muted);
  --c-c8d4f5: var(--sp-ink-2);
  --c-d6d8de: var(--sp-ink-2);
  /* Comment pins on the client page */
  --pin-new: var(--sp-ink);
}

/* Headings in the site's display face */
h1, h2, .dialog-head h2, .fig strong, .tab, .kcol h3 { font-family: "Bricolage Grotesque", var(--font); }

/* Logo instead of the product name (admin, mail, sign-in) */
body > header h1, #pwForm h1 {
  font-size: 0;
  line-height: 0;
}
body > header h1::before, #pwForm h1::before {
  content: "";
  display: inline-block;
  width: 130px;
  height: 40px;
  background: url(/_theme/brand/logo.png) no-repeat left center / contain;
  vertical-align: middle;
}
#pwForm h1::before { display: block; margin: 0 auto .5rem; width: 160px; height: 50px; background-position: center; }
body > header h1 a.home { font-size: 0; }
body > header h1 .crumb { font-size: 1rem; line-height: 1.2; margin-left: .5rem; color: var(--text-muted); vertical-align: middle; }
body > header { background: var(--surface); }