/* Sentio's brand for Pulse (decision 0141, docs/styleguide.md): the tokens' values (design/tokens.json), typed here
   because Pulse's own pages are plain files that do not load the built tokens.css.
   Fonts: Sentient (display and headings, served from here), Satoshi (body, via Fontshare). Laica and Estragon, Sala's,
   stay declared for the Sala Hub pages (hub/page.css) and for a studio's brand that names them.
   Colours: White, Ink, Bone; Sage, Lilac, Pale Grey, Slate. The names before Sentio (--beige, --green, --purple,
   --dark) point at the new colours, because Pulse's pages still read them. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap");
@font-face { font-family: "Sentient"; src: url("/static/brand/Sentient-200.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("/static/brand/Sentient-200i.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("/static/brand/Sentient-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("/static/brand/Sentient-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Estragon"; src: url("/static/brand/ABCEstragon-Thin.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Laica"; src: url("/static/brand/ABCLaicaA-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --white: #FFFFFF; --ink: #16151B; --bone: #F4F1EB;
  --sage: #EDF2EA; --lilac: #ECE8FA; --grey: #F3F4F6; --slate: #4A505C;
  --beige: var(--bone); --green: var(--sage); --purple: var(--lilac); --dark: var(--slate);
  --bg: var(--bone); --panel: var(--white); --muted: var(--slate); --line: #E2DED6; --soft: var(--grey);
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-head: "Sentient", "Satoshi", Georgia, serif;
  --font-display: "Sentient", Georgia, serif;
}
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: 0; }
.wordmark { font-family: var(--font-display); font-weight: 200; letter-spacing: .02em; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { height: 16px; width: auto; display: block; align-self: center; }
.brand .studio-word { font-family: var(--font-head); font-size: 17px; line-height: 1; }   /* a studio with no logo (4.4) */
.brand .wordmark { font-size: 26px; line-height: 1; }
.muted { color: var(--muted); }