/* Brand1st design tokens — the premium pass (approved 30 Oct 2026).
   Base: the People Work look (quiet, serif-led). Borrowed from Designjoy, and only these: the Brand Master cover as a
   tilted card, monospace labels, one colour burst when all five stages are locked.
   Rules: lime marks only the next step. One burst, only at 5 of 5. After Stage 04 locks, --b1-ed-accent and
   --b1-ed-display switch to the customer's edition (b1st-premium.js). The Brand Master and briefs (.b1-bm-*, .b1-bf-*)
   don't use these tokens and don't change.
   Fonts load in the page <head> (tools/build.mjs): Instrument Serif, Inter Tight 400/500/600, IBM Plex Mono 400/500. */

:root{
  --b1-ink:#1D2622;        /* text, dark panels */
  --b1-ink-2:#262F2B;      /* cards on dark */
  --b1-ink-3:#2A3430;      /* icon tiles on dark */
  --b1-stone:#EDEAE5;      /* page background */
  --b1-card:#F4F6F1;       /* cards, header pill */
  --b1-card-soft:rgba(244,246,241,.55);
  --b1-mist:linear-gradient(180deg,#BFC9CF 0%,#D3D8DA 55%,#EDEAE5 100%); /* the dashboard's top gradient only */
  --b1-muted:#4E5753;      /* secondary text */
  --b1-muted-2:#59625E;
  --b1-line:rgba(29,38,34,.12);
  --b1-line-2:rgba(29,38,34,.18);
  --b1-wash:rgba(29,38,34,.08); /* secondary buttons, eyebrow pills */
  --b1-lime:#E6F35A;       /* next step only */
  --b1-lime-tint:#EEF4C9;  /* the "Sharp" note */
  --b1-tile-pink:#E9CFD2; --b1-tile-blue:#CFD9DF; --b1-tile-sage:#DCE4CF; --b1-tile-sand:#E8E2D6; --b1-tile-lime:#EEF4B8;
  --b1-on-ink:#F4F6F1; --b1-on-ink-2:rgba(244,246,241,.72); --b1-on-ink-3:rgba(244,246,241,.55);

  --b1-serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --b1-sans:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --b1-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* the edition: Brand1st's own until Stage 04 locks, then the customer's (set inline by b1st-premium.js) */
  --b1-ed-accent:#2B2B2B;
  --b1-ed-display:var(--b1-serif);
  --b1-ed-weight:400;

  --b1-r-card:28px; --b1-r-inner:22px; --b1-r-tile:16px; --b1-r-pill:999px;
  --b1-ease:cubic-bezier(.2,.7,.2,1);
}
/* set by B1Doc.applyEdition on <html> once Stage 04 has been locked */
html.b1-ed-on{--b1-ed-accent:var(--bm-accent);--b1-ed-display:var(--bm-display);--b1-ed-weight:var(--bm-display-weight);}
html{background:var(--b1-stone);}
html body{background:var(--b1-stone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* ---- shared pieces any page can use ---- */
.b1-mono{font-family:var(--b1-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.b1-pill-tag{display:inline-block;font-family:var(--b1-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:var(--b1-r-pill);background:var(--b1-wash);color:var(--b1-ink);}
.b1-go{display:inline-flex;align-items:center;gap:16px;min-height:60px;padding:0 8px 0 28px;border-radius:var(--b1-r-pill);border:0;
  background:var(--b1-card);color:var(--b1-ink);font:600 17px/1 var(--b1-sans);text-decoration:none;cursor:pointer;
  transition:transform .3s var(--b1-ease), box-shadow .3s var(--b1-ease);}
.b1-go:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(29,38,34,.10);}
.b1-go-dot{width:46px;height:46px;border-radius:50%;background:var(--b1-lime);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--b1-ink);}
.b1-go-dot svg{width:16px;height:16px;}
.b1-go-2{display:inline-flex;align-items:center;min-height:60px;padding:0 28px;border-radius:var(--b1-r-pill);background:var(--b1-wash);
  color:var(--b1-ink);font:600 17px/1 var(--b1-sans);text-decoration:none;}
.b1-go-2:hover{background:rgba(29,38,34,.12);}
.b1-on-ink .b1-go-2{background:var(--b1-ink-2);color:var(--b1-on-ink);}
.b1-tile{width:52px;height:52px;border-radius:var(--b1-r-tile);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--b1-ink);}
.b1-tile svg{width:22px;height:22px;}

/* links inside app pages inherit colour; the two buttons keep theirs */
html .b1-root a.b1-go, html .b1-lockmo a.b1-go{color:var(--b1-ink);}
html .b1-root a.b1-go-2{color:var(--b1-ink);}
html .b1-lockmo a.b1-go-2, html .b1-root.b1-dash.is-burst a.b1-go-2{color:var(--b1-card);}

/* ---- motion: rise in, tilt in, bars fill, breathe, float. All off under reduced motion. ---- */
@keyframes b1-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes b1-tilt{from{opacity:0;transform:translateY(24px) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes b1-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes b1-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes b1-cover-in{from{opacity:0;transform:translateY(30px) rotate(2deg)}to{opacity:1;transform:rotate(-5deg)}}
@keyframes b1-float{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-8px)}}
@keyframes b1-drift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes b1-fade{from{opacity:0}to{opacity:1}}
.b1-a-up{animation:b1-up .8s var(--b1-ease) both;}
.b1-a-tilt{animation:b1-tilt .9s var(--b1-ease) .35s both;}
.b1-a-grow{transform-origin:left center;animation:b1-grow 1s var(--b1-ease) .5s both;}
.b1-a-breathe{animation:b1-breathe 2.4s ease-in-out infinite;}
.b1-d1{animation-delay:.1s}.b1-d2{animation-delay:.2s}.b1-d3{animation-delay:.3s}.b1-d4{animation-delay:.4s}.b1-d5{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  .b1-a-up,.b1-a-tilt,.b1-a-grow,.b1-a-breathe,.b1-cover,.b1-burst,.b1-seal *,.b1-lockmo *{animation:none !important;transition:none !important;}
}