/* AirNomadNetwork brand tokens: the one place colors and fonts are set. Loaded by every landing page (/brand.css) and
   imported by the app (src/index.css), so a change here changes both. Direction: design/visual-direction.html.
   Harbor teal is the brand and means trust; Porch Light orange is only for things you can act on. */
/* Fonts are served from our own site (/fonts/, SIL Open Font License), so visitors' browsers never contact Google. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');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';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/figtree-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/figtree-normal-latin.woff2) format('woff2');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';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/figtree-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/figtree-italic-latin.woff2) format('woff2');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}

:root{
  --bg:#F5F7F6; --surface:#E8EFEE; --card:#FFFFFF; --ink:#13262D; --muted:#4F6369; --line:#D3DEDD;
  --teal:#0F5C63; --teal-ink:#FFFFFF; --teal-soft:#E3EFEF;
  --porch:#B5461F; --porch-ink:#FFFFFF; --porch-hover:#9C3B19; --porch-soft:#FBE9E1; /* white text on it: 5.4:1 */
  --control:#6F8387; /* form-field borders: 3:1 or better on every background */
  --signal:var(--porch);
  --online:#2F8F5B;
  --shadow:0 1px 2px rgba(19,38,45,.05),0 4px 16px rgba(19,38,45,.06);
  --r-sm:8px; --r-md:12px; --r-lg:20px; /* corner radii: fields, buttons and inner boxes, cards */
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0D1A1D; --surface:#142428; --card:#142428; --ink:#E8F0F1; --muted:#9DB3BA; --line:#24393F;
  --teal:#5BC4CC; --teal-ink:#08191C; --teal-soft:#17363A;
  --porch:#F08A5D; --porch-ink:#1C0D06; --porch-hover:#F5A07A; --porch-soft:#3A2219;
  --online:#5CC98E; --control:#6A878F; --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.3);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0D1A1D; --surface:#142428; --card:#142428; --ink:#E8F0F1; --muted:#9DB3BA; --line:#24393F;
  --teal:#5BC4CC; --teal-ink:#08191C; --teal-soft:#17363A;
  --porch:#F08A5D; --porch-ink:#1C0D06; --porch-hover:#F5A07A; --porch-soft:#3A2219;
  --online:#5CC98E; --control:#6A878F; --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.3);
  color-scheme:dark;}

/* The lit-window mark next to the wordmark. Markup: <a class="logo"><svg class="mark">…</svg>AirNomadNetwork</a> */
.logo{display:inline-flex;align-items:center;gap:8px;font:800 1.3rem/1 var(--display);letter-spacing:-.03em;
  text-decoration:none;color:var(--ink)}
.logo .mark{width:30px;height:30px;flex:none}
.mark .frame{fill:var(--teal)}
.mark .pane{fill:var(--porch)}
.mark .bars{stroke:var(--teal)}