/* web/css/tokens.css: EfficiOS design tokens. The same values as the North
   Star mocks (es-website drafts/efficios-flow/flow.css), which take them from
   the Connect pages Luba picked. Change a value here and every screen follows. */

@font-face{font-family:"Satoshi";src:url(/fonts/Satoshi-Variable.ttf) format("truetype");font-weight:300 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  color-scheme:light;

  /* colour: warm ground, white paper, ink; gold for "needs you"; red only for overdue or broken */
  --ground:#f4f1ec; --paper:#fff; --ink:#171513; --muted:#6a6259; --faint:#8d857a;
  --line:rgba(23,21,19,.09); --line-2:rgba(23,21,19,.055); --line-strong:rgba(23,21,19,.16); --wash:rgba(23,21,19,.035);
  --neg:#c62333; --neg-line:rgba(198,35,51,.35); --pos:#256b41;
  --accent:#e8b84b; --accent-ink:#6b4e06; --accent-wash:rgba(232,184,75,.18); --accent-line:rgba(232,184,75,.55);
  --on-dark:#f2ede0; --on-dark-muted:#938b80; --on-dark-wash:rgba(242,237,224,.09);
  --backdrop:rgba(23,21,19,.42);

  /* type: Figtree for headings and numbers that carry the day, Satoshi for everything else */
  --display:"Figtree",system-ui,sans-serif;
  --body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* corners: Connect's set, nothing else */
  --r-xs:7px; --r-sm:8px; --r-md:9px; --r-lg:12px; --r-xl:14px; --r-pill:999px;

  /* depth */
  --lift:0 1px 2px rgba(23,21,19,.05),0 10px 24px rgba(23,21,19,.06);
  --lift-open:0 1px 2px rgba(23,21,19,.05),0 14px 34px rgba(23,21,19,.07);
  --float:0 18px 50px rgba(23,21,19,.22);

  /* layout */
  --rail-w:212px;
  --tabs-h:64px;
  --page-max:1280px;
  --gutter:28px;
}
@media (max-width:859.98px){ :root{ --gutter:16px; } }