/*
  Solid's brand, as CSS.
  ----------------------
  Pulled out of index.html so the marketing page and anything added later
  cannot drift into two slightly different blues. Every value here exists
  somewhere in the product already:

  --mark-top / --mark-bottom   ui.tsx, MARK_TOP and MARK_BOTTOM. Two fists in
                               two colours, because the point of the mark is
                               that it is two people, not one brand.
  --accent, --ok, --amber      the app's dark theme, verbatim.
  --seed-*                     core/identicon.ts draws an address as a 5×5
                               mirrored grid in two hues 140° apart. It is the
                               most ownable shape this product has and it had
                               never appeared on the website.
*/

:root{
  /* surfaces */
  --bg:#08090D; --panel:#0F1218; --surface:#151921; --raise:#1B202A;
  --fg:#F4F6FA; --dim:#98A0AD; --muted:#666E7B; --line:#1F242D;

  /* brand */
  --mark-top:#5B5FFF; --mark-bottom:#FF8A3D;
  --accent:#5B5FFF; --accent-2:#9194FF; --amber:#FF8A3D; --ok:#5ED18F;
  --sol-a:#9945FF; --sol-b:#14F195;

  /* identicon hues, the two used for the site's own fingerprint */
  --seed-a:hsl(214,62%,58%); --seed-b:hsl(354,58%,52%);

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Amounts and prices, and nothing else. See the @font-face note below. */
  --figure:"Inter Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --enter:cubic-bezier(.16,1,.3,1);
  --gut:22px;
}

/*
  The face money is set in, the same Inter Display the app uses for every
  balance and amount (ui.tsx, FIGURE). Words stay on the system face.

  Served from this domain rather than a font CDN, because a request to
  somebody else's server for a typeface is a visitor's address handed to them
  for nothing. `swap` because a price in the fallback face for a moment is
  fine on a page selling something. The self-contained pages - pay, claim,
  receipt - carry their own copy with `optional` instead: see pay/index.html.

  The Bold file answers every weight from 700 up, so a 790 heading does not
  get a bold synthesised on top of a face that is already bold. SIL OFL 1.1,
  in fonts/Inter-OFL.txt beside the files.
*/
@font-face{font-family:"Inter Display";src:url(/fonts/InterDisplay-SemiBold.woff2) format("woff2");
           font-weight:500 690;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url(/fonts/InterDisplay-Bold.woff2) format("woff2");
           font-weight:700 900;font-style:normal;font-display:swap}

/*
  The voice faces, from September 2026: Bricolage Grotesque for headlines,
  Figtree for words. The friend who always settles up talks like a person, and
  the system face never did. Both variable, both SIL OFL 1.1 (licences beside
  the files), split into Latin and Latin Extended so a page that only needs
  the first never downloads the second. Amounts stay in Inter Display.
*/
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque-Latin.woff2) format("woff2");
           font-weight:500 800;font-style:normal;font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/BricolageGrotesque-LatinExt.woff2) format("woff2");
           font-weight:500 800;font-style:normal;font-display:swap;
           unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";src:url(/fonts/Figtree-Latin.woff2) format("woff2");
           font-weight:400 800;font-style:normal;font-display:swap;
           unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/fonts/Figtree-LatinExt.woff2) format("woff2");
           font-weight:400 800;font-style:normal;font-display:swap;
           unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* The mark, at any size. One element, two bars, two nubs — the geometry is
   favicon.svg's, expressed as a ratio of the box so it scales cleanly. */
.mark{position:relative;flex:none;aspect-ratio:1}
.mark i{position:absolute;display:block;border-radius:22%}
.mark i:nth-child(1){background:var(--mark-top);left:23.4%;top:14%;width:53.1%;height:31.2%;border-radius:32%}
.mark i:nth-child(2){background:var(--mark-top);left:18%;top:28%;width:9.4%;height:14%;border-radius:44%}
.mark i:nth-child(3){background:var(--mark-bottom);left:23.4%;top:54.7%;width:53.1%;height:31.2%;border-radius:32%}
.mark i:nth-child(4){background:var(--mark-bottom);left:72.6%;top:57.8%;width:9.4%;height:14%;border-radius:44%}

/* An address fingerprint. Five columns, mirrored — the right two repeat the
   left two, which is what makes it memorable rather than noise. */
.seed{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
      gap:8%;aspect-ratio:1;flex:none}
.seed b{display:block;border-radius:18%}