/* brand.css: EVERY brand-specific value of results-site lives here (plus public/brand.json for the
   title and wordmark text). To rebrand: replace this file and brand.json; site.css only reads the role
   tokens defined below (--bg --bg-raised --fg --soft --alt --rule --hair --dots --focus --ok --almost
   --miss --accent --on-accent --sh-col --disp --body --mono) and the .wm wordmark class.
   Current brand: flique (tokens from flique/website/public/styles.css). */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Space+Grotesk:wght@400..700&display=swap");

:root{
  --paper:#FAF9F7; --paper-bright:#FFFEFB; --panel:#F0EDE8;
  --ink:#1C1917; --muted:#625C57; --soft-on-ink:#D2CCC6;
  --pink:#FF2D8B; --pink-deep:#D6116C;
  --moss:#4E7A27; --gold:#9A6410; --coral:#B84E33;
  --moss-d:#8FBE5A; --gold-d:#E0A93A; --coral-d:#E87461;
  --panel-ink:#2A2521; --hair-light:rgba(28,25,23,.18); --hair-dark:rgba(250,249,247,.22);
  --dots-light:rgba(28,25,23,.06); --dots-dark:rgba(250,249,247,.04);

  /* roles (light) */
  --bg:var(--paper); --bg-raised:var(--paper-bright); --fg:var(--ink); --soft:var(--muted); --alt:var(--panel);
  --rule:var(--ink); --hair:var(--hair-light); --dots:var(--dots-light); --focus:var(--ink);
  --ok:var(--moss); --almost:var(--gold); --miss:var(--coral); --accent:var(--pink); --on-accent:var(--ink); --sh-col:var(--ink);

  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--ink); --bg-raised:var(--panel-ink); --fg:var(--paper); --soft:var(--soft-on-ink); --alt:var(--panel-ink);
    --rule:var(--paper); --hair:var(--hair-dark); --dots:var(--dots-dark); --focus:var(--paper);
    --ok:var(--moss-d); --almost:var(--gold-d); --miss:var(--coral-d); --sh-col:var(--pink); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--ink); --bg-raised:var(--panel-ink); --fg:var(--paper); --soft:var(--soft-on-ink); --alt:var(--panel-ink);
  --rule:var(--paper); --hair:var(--hair-dark); --dots:var(--dots-dark); --focus:var(--paper);
  --ok:var(--moss-d); --almost:var(--gold-d); --miss:var(--coral-d); --sh-col:var(--pink); color-scheme:dark;
}

/* the wordmark: brand.json's wordmarkHtml is "fl<b>ı</b>que"; the dotless i takes a pink square */
.wm b{position:relative; font-weight:inherit}
.wm b::after{content:""; position:absolute; left:50%; top:-.03em; width:.21em; height:.21em; background:var(--pink); box-shadow:.05em .05em 0 var(--ink); transform:translateX(-50%) rotate(-8deg)}