/* ============================================================
   Brim · 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 Brim: 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:#f2f1ec; --bg:#ffffff; --bg2:#f7f6f2; --bg3:#e8e6df;
  --raised:#ffffff; /* the chosen side of a segmented switch, lifted off its track */
  --fg:#080807; --fg2:#3d3c39; --fg3:#5a5853;
  --border:rgba(11,11,10,.14); --border2:rgba(11,11,10,.26); --hairline:rgba(11,11,10,.10);
  --amber:#ef9f27; --amber-on:#412402; --amber-ink:#764307; --amber-wash:#faeeda; --amber-press:#e08f14;
  --chart-1:#b8740a;       /* chart marks. Amber two steps deeper, so bars hold well over 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(242,241,236,.8); --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,.08), 0 1px 1px rgba(11,11,10,.05);
  --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;
  --ease-sheet:cubic-bezier(.32,.72,0,1); /* the curve an iPhone sheet rides on */
  --dur-sheet:.44s;  /* a sheet travelling up from the bottom */
  --dur-draw:.64s;   /* a chart line drawing itself, a bar growing, a number counting up */
  --dur-flash:1.4s;  /* the glow on a fill that was just saved */
  --stagger-mark:24ms; /* between one bar and the next as a chart draws */
  --ease-icon:cubic-bezier(.2,0,0,1); /* one icon handing over to another */

  --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:#0b0b0a; --bg:#181817; --bg2:#1f1f1d; --bg3:#2a2a27; --raised:#3d3d39;
  --fg:#fbfaf7; --fg2:#d8d7ce; --fg3:#aba99f;
  --border:rgba(251,250,247,.12); --border2:rgba(251,250,247,.22); --hairline:rgba(251,250,247,.09);
  --amber:#ef9f27; --amber-on:#412402; --amber-ink:#ef9f27; --amber-wash:#2e2108; --amber-press:#f5b04a;
  --chart-1:#e3962a;
  --yes:#32d74b; --yes-wash:rgba(50,215,75,.14); --no:#ff453a; --no-wash:rgba(255,69,58,.14);
  --glass:rgba(11,11,10,.78); --scrim:rgba(0,0,0,.7);
  --shadow-1:inset 0 1px 0 rgba(251,250,247,.04), 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.3);
  --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:#0b0b0a; --bg:#181817; --bg2:#1f1f1d; --bg3:#2a2a27; --raised:#3d3d39;
    --fg:#fbfaf7; --fg2:#d8d7ce; --fg3:#aba99f;
    --border:rgba(251,250,247,.12); --border2:rgba(251,250,247,.22); --hairline:rgba(251,250,247,.09);
    --amber:#ef9f27; --amber-on:#412402; --amber-ink:#ef9f27; --amber-wash:#2e2108; --amber-press:#f5b04a;
  --chart-1:#e3962a;
    --yes:#32d74b; --yes-wash:rgba(50,215,75,.14); --no:#ff453a; --no-wash:rgba(255,69,58,.14);
    --glass:rgba(11,11,10,.78); --scrim:rgba(0,0,0,.7);
    --shadow-1:inset 0 1px 0 rgba(251,250,247,.04), 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.3);
    --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);
  }
}