/* ============================================================
   FuelLog · TOKENS
   Every value the kit is allowed to use. If a number is not
   here, it does not go in the CSS. Seeded from hdw-ui, retokened
   for FuelLog: warm paper, one amber accent, mono numerals.
   ============================================================ */
/* Numbers are set in Basis Grotesque Mono, the same face the original FuelLog used.
   The file travels with the app, so it shows with no signal. Text is SF Pro from the
   device, so there is nothing to download for it. */
@font-face{
  font-family:'Basis Grotesque Mono';
  src:url('../../fonts/BasisGrotesqueMono-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  color-scheme:light dark;
  --canvas:#f5f4f0; --bg:#ffffff; --bg2:#f9f8f5; --bg3:#efede7;
  --fg:#0b0b0a; --fg2:#52514e; --fg3:#6f6d67;
  --border:rgba(11,11,10,.10); --border2:rgba(11,11,10,.18); --hairline:rgba(11,11,10,.08);
  --amber:#ef9f27; --amber-on:#412402; --amber-ink:#854f0b; --amber-wash:#faeeda; --amber-press:#e08f14;
  --chart-1:#c9820c;       /* chart marks. Amber one step deeper, so bars hold 3:1 on a white card */
  --yes:#1d9c3f; --yes-wash:rgba(29,156,63,.10);
  --no:#d92d20;  --no-wash:rgba(217,45,32,.10);
  --glass:rgba(245,244,240,.78); --glass-fx:saturate(180%) blur(20px);
  --scrim:rgba(11,11,10,.45);
  --white:#ffffff;  /* the switch thumb, and text on red. Same in both themes */

  --font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter Tight',system-ui,'Segoe UI',Roboto,sans-serif;
  --font-num:'Basis Grotesque Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Roboto Mono',monospace;
  --fs-hero:50px;    /* the one big number on a screen, the size the original FuelLog used */
  --fs-title:26px;   /* a screen's title */
  --fs-stat:22px;    /* a number in a tile */
  --fs-heading:17px; /* a section, a sheet's title, a row's main number */
  --fs-body:14px;    /* everything you read or press */
  --fs-small:13px;   /* the line that explains */
  --fs-caption:11px; /* dates, counts */
  --w-reg:400;
  --lh-tight:1.1; --lh-snug:1.25; --lh:1.4; --lh-prose:1.6; --measure:68ch;

  --s-0:2px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --page-pad-x:16px; --col-max:430px;

  --r-xs:4px; --r-sm:6px; --radius:8px; --r-box:12px; --r-lg:14px; --r-round:999px;
  --ctrl-h:40px; --ctrl-h-lg:48px; --hit:40px; --fab:56px; --bw:1px;

  --shadow-1:0 1px 2px rgba(11,11,10,.06), 0 1px 1px rgba(11,11,10,.04);
  --shadow-2:0 2px 6px rgba(11,11,10,.07), 0 1px 2px rgba(11,11,10,.05);
  --shadow-soft:0 4px 16px rgba(11,11,10,.08), 0 1px 3px rgba(11,11,10,.06);
  --shadow-pop:0 24px 64px rgba(11,11,10,.18), 0 2px 8px rgba(11,11,10,.08);
  --shadow-fab:0 4px 20px rgba(239,159,39,.35), 0 1px 3px rgba(11,11,10,.12);

  --dur-fast:.12s; --dur:.2s; --dur-slow:.32s; --dur-exit:.14s;
  --dur-spin:.7s;   /* one turn of a loading spinner */
  --dur-pulse:1.2s; /* one breath of a loading skeleton */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1);
  --stagger:40ms; --press:.96;

  --focus-w:2px; --focus-offset:2px; --focus:var(--amber-ink);
  --z-base:0; --z-sticky:100; --z-fab:150; --z-overlay:400; --z-modal:500; --z-toast:600;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#141413; --bg:#1e1e1c; --bg2:#252523; --bg3:#2e2e2b;
  --fg:#f5f4f0; --fg2:#c3c2b7; --fg3:#9a988f;
  --border:rgba(245,244,240,.10); --border2:rgba(245,244,240,.18); --hairline:rgba(245,244,240,.08);
  --amber:#ef9f27; --amber-on:#412402; --amber-ink:#ef9f27; --amber-wash:#2a1f0a; --amber-press:#f5b04a;
  --chart-1:#c98420;
  --yes:#32d74b; --yes-wash:rgba(50,215,75,.14); --no:#ff453a; --no-wash:rgba(255,69,58,.14);
  --glass:rgba(20,20,19,.76); --scrim:rgba(0,0,0,.6);
  --shadow-1:0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18);
  --shadow-2:0 2px 6px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.16);
  --shadow-soft:0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --shadow-pop:0 24px 64px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
  --shadow-fab:0 4px 20px rgba(239,159,39,.22), 0 1px 3px rgba(0,0,0,.5);
  --focus:var(--amber);
}
:root[data-theme="light"]{ color-scheme:light; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --canvas:#141413; --bg:#1e1e1c; --bg2:#252523; --bg3:#2e2e2b;
    --fg:#f5f4f0; --fg2:#c3c2b7; --fg3:#9a988f;
    --border:rgba(245,244,240,.10); --border2:rgba(245,244,240,.18); --hairline:rgba(245,244,240,.08);
    --amber:#ef9f27; --amber-on:#412402; --amber-ink:#ef9f27; --amber-wash:#2a1f0a; --amber-press:#f5b04a;
  --chart-1:#c98420;
    --yes:#32d74b; --yes-wash:rgba(50,215,75,.14); --no:#ff453a; --no-wash:rgba(255,69,58,.14);
    --glass:rgba(20,20,19,.76); --scrim:rgba(0,0,0,.6);
    --shadow-1:0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.18);
    --shadow-2:0 2px 6px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.16);
    --shadow-soft:0 4px 16px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --shadow-pop:0 24px 64px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
    --shadow-fab:0 4px 20px rgba(239,159,39,.22), 0 1px 3px rgba(0,0,0,.5);
    --focus:var(--amber);
  }
}