/* ─────────────────────────────────────────────────────────────────
   Lookahead — design tokens, fonts, topbar.
   Ported from Claude Design "Lloyd Firehose" zip.
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Atlas Grotesk";
  src: url("/assets/AtlasGrotesk-Regular-2f82d654.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("/assets/AtlasGrotesk-RegularItalic-08b51894.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atlas Grotesk";
  src: url("/assets/AtlasGrotesk-Bold-Web-25b10f22.woff2") format("woff2"),
       url("/assets/AtlasGrotesk-Bold-Web-ff6f17f5.woff")  format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Reckless Wide";
  src: url("/assets/RecklessWideS-Regular-a80c6560.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Reckless Wide";
  src: url("/assets/RecklessWideS-Medium-9efbe68f.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Reckless Variable";
  src: url("/assets/RecklessCollectionVF-7b604688.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --la-ink:           #000000;
  --la-ink-soft:      #1A1A1A;
  --la-ink-26:        #262626;
  --la-graphite:      #4C4C4C;
  --la-stone:         #737373;
  --la-silver:        #9E9E9E;
  --la-mist:          #BFBFBF;
  --la-ash:           #D9D9D9;
  --la-cloud:         #EEEEEE;
  --la-fog:           #F2F2F2;
  --la-paper:         #FEFEFC;
  --la-white:         #FFFFFF;

  --la-pink:          #ECB7B8;
  --la-mint:          #B8E2E1;
  --la-butter:        #FFEC9C;
  --la-leaf:          #B8FFCB;
  --la-cobalt:        #1643E8;
  --la-flame:         #FF1C33;
  --la-iris:          #A287F4;

  --fg-1: var(--la-ink);
  --fg-2: rgba(0, 0, 0, 0.5);
  --fg-3: var(--la-stone);
  --fg-4: var(--la-silver);
  --fg-on-dark:      var(--la-white);

  --border-soft:     rgba(0, 0, 0, 0.1);
  --divider:         var(--la-ash);

  /* Page shell. Every top-level page resolves to this geometry — .la-page
     and the older wrappers still in use (.cdp-page, .crm-container-wide,
     .crm-cand-container, .crm-container, .jp, .mi-page, .fh). Change the
     app's width or gutter here, once, not in six stylesheets. */
  --la-page-max:    1600px;
  --la-page-gutter: 2rem;
  --la-page-pad:    1.5rem var(--la-page-gutter) 3rem;

  --radius-xs: 4px;   /* buttons, chips */
  --radius-sm: 6px;   /* inputs */
  --radius-md: 8px;   /* cards */
  --radius-lg: 12px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 4px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);

  --font-display: "Reckless Wide", "Reckless Variable", Georgia, "Times New Roman", serif;
  --font-sans:    "Atlas Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --type-mono-sm: 500 12px/1.5 var(--font-mono);
  --type-body-sm: 400 14px/1.5 var(--font-sans);
}

/* ─── Topbar (site-wide) ─────────────────────────────────────── */
.la-topbar {
  height: 64px;
  background: var(--la-paper);
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center;
  padding: 0 28px;
  gap: 14px;
  position: sticky; top: 0;
  z-index: 5;
  font-family: var(--font-sans);
}
.la-topbar .brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding-right: 18px;
  margin-right: 4px;
  border-right: 1px solid var(--border-soft);
  height: 28px;
  text-decoration: none;
  border-bottom: 0;
  color: var(--fg-1);
}
.la-topbar .brand img { height: 14px; }
.la-topbar .brand:hover { opacity: 0.7; }
.la-topbar .search {
  position: relative;
  flex: 0 1 320px;
  min-width: 200px;
  margin: 0 8px;
}
.la-topbar .search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 28px;
  background: var(--la-white);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font: var(--type-body-sm);
  color: var(--fg-1);
  font-family: var(--font-sans);
}
.la-topbar .search input::placeholder { color: var(--fg-3); }
.la-topbar .search input:focus { outline: none; border-color: var(--la-ink); }
.la-topbar .search svg {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3);
  width: 16px; height: 16px;
}
.la-topbar .search kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 500 10px var(--font-mono);
  color: var(--fg-3);
  background: var(--la-white);
  border: 1px solid var(--border-soft);
  padding: 1px 5px; border-radius: 3px;
}

.la-topbar .nav { display: inline-flex; gap: 2px; padding: 0 6px; align-items: center; }
.la-topbar .nav a,
.la-topbar .nav button {
  font: 500 13.5px var(--font-sans);
  color: var(--fg-2);
  padding: 6px 10px;
  border: 0; border-radius: 4px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.la-topbar .nav a:hover,
.la-topbar .nav button:hover { color: var(--fg-1); background: var(--la-fog); opacity: 1; }
.la-topbar .nav a.active { color: var(--fg-1); font-weight: 600; }
.la-topbar .nav--secondary { gap: 0; padding: 0; }
.la-topbar .nav--secondary a,
.la-topbar .nav--secondary button {
  font: 500 11.5px var(--font-sans);
  color: var(--fg-3);
  letter-spacing: 0.01em;
  padding: 6px 8px;
}
.la-topbar .nav--secondary a:hover,
.la-topbar .nav--secondary button:hover { color: var(--fg-1); background: transparent; }

.la-topbar .spacer { flex: 1; }
.la-topbar .me {
  display: inline-flex; align-items: center;
  gap: 8px;
  font: 500 12px var(--font-sans);
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 0;
}
.la-topbar .me .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--la-pink);
  display: inline-grid; place-items: center;
  font: 700 10px var(--font-sans);
  color: var(--la-ink);
  overflow: hidden;
}
.la-topbar .me .av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The app canvas.
   Every page gets it. This used to be keyed to `.has-la-topbar`, but only 5 of
   ~90 views ever set a body class, so every other page — candidates, companies,
   people, updates — fell through to the browser default and had no designed
   background at all. The white cards, tables and rails are drawn to sit ON
   something; without this they float on nothing.
   --la-fog (not --la-paper): the white cards, tables and rails need something
   to sit ON, and paper (#FEFEFC) is too close to #FFF to read as a canvas.
   Fog is what 29 views were already each setting for themselves in a local
   <style> block; this is that same colour, declared once.
   Pages that own their canvas (`.dg-canvas`, `.copilot-page`) still win on
   specificity. */
body { background: var(--la-fog); }