/* ==========================================================================
   চাকা — tokens.

   The world this comes from: a garage at 10 pm. Concrete floor, a tube light,
   a row of easy-bikes on charge. The charger's LED goes green when a battery
   is full, which is the colour of money in. The battery terminal is red, and
   red is spent on one thing only: arrears. The indicator lamp is amber, for
   a vehicle that didn't run. The primary button is the battery case: black
   on concrete by day, tube-light white on asphalt by night. There's no
   brand blue.

   The vehicle's number is drawn as the painted plate on its back, the one
   thing everyone in a garage uses to name a vehicle.

   Type: Mina for plates and money. Its figures are square and wide, like
   numbers painted with a stencil, and it stays legible at arm's length.
   Noto Sans Bengali for reading, because conjuncts must hold at 13px on a
   ৳9,000 phone.
   ========================================================================== */

:root{
  /* day: concrete */
  --ground:#E8EAE6;      /* cool concrete, not cream */
  --surface:#FFFFFF;
  --surface-2:#F4F5F2;
  --sunk:#DCDFDA;
  --line:#D5D9D3;
  --line-2:#BEC4BD;

  --ink:#121517;         /* battery case */
  --ink-2:#434B49;
  --ink-3:#5A625F;       /* 5.18:1 on --ground; #666E6C measured 4.32 and failed AA */

  --press:#121517;       /* primary button fill */
  --on-press:#F4F5F2;

  --led:#0E7A45;         /* paid: 5.40:1 on white, 4.61 on --led-wash */
  --led-fill:#18A05B;
  --led-wash:#DDF2E5;

  --terminal:#B42318;    /* arrears, and nothing else: 6.57:1 on white */
  --terminal-wash:#FBE4E1;

  --lamp:#8A5A00;        /* off day, text: 5.93:1 on white */
  --lamp-fill:#F2B544;
  --lamp-wash:#FCEFCF;

  --plate:#F4F3EC;       /* painted plate stays painted in both themes */
  --plate-ink:#121517;   /* 16.5:1 */
  --plate-edge:#121517;

  --scrim:rgba(8,10,12,.46);

  --r-xs:6px; --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;

  /* two layers: a tight contact shadow and a wide, negative-spread ambient */
  --sh-s:0 1px 1.5px rgba(18,21,23,.07);
  --sh-m:0 1px 2px rgba(18,21,23,.06), 0 12px 26px -18px rgba(18,21,23,.45);
  --sh-bar:0 -1px 0 var(--line), 0 -14px 30px -24px rgba(18,21,23,.5);
  --sh-sheet:0 -10px 44px -14px rgba(18,21,23,.38);

  --display:'Mina','Noto Sans Bengali',system-ui,sans-serif;
  --body:'Noto Sans Bengali',system-ui,sans-serif;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}

/* night: asphalt under a tube light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0E1113; --surface:#171B1E; --surface-2:#1D2226; --sunk:#0A0C0E;
    --line:#262C31; --line-2:#343C42;
    --ink:#ECEFEA; --ink-2:#A8B0AC; --ink-3:#8A938F;   /* 5.49:1 on --surface */
    --press:#ECEFEA; --on-press:#0E1113;
    --led:#4FD88A; --led-fill:#2FB56C; --led-wash:#12291D;
    --terminal:#FF6B5E; --terminal-wash:#2E1714;        /* 6.20:1 on --surface */
    --lamp:#F2B544; --lamp-fill:#F2B544; --lamp-wash:#2B2210;
    --scrim:rgba(0,0,0,.6);
    --sh-s:0 1px 1.5px rgba(0,0,0,.4);
    --sh-m:0 1px 2px rgba(0,0,0,.45), 0 12px 26px -18px rgba(0,0,0,.9);
    --sh-bar:0 -1px 0 var(--line), 0 -14px 30px -24px rgba(0,0,0,.9);
    --sh-sheet:0 -10px 44px -14px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1113; --surface:#171B1E; --surface-2:#1D2226; --sunk:#0A0C0E;
  --line:#262C31; --line-2:#343C42;
  --ink:#ECEFEA; --ink-2:#A8B0AC; --ink-3:#8A938F;
  --press:#ECEFEA; --on-press:#0E1113;
  --led:#4FD88A; --led-fill:#2FB56C; --led-wash:#12291D;
  --terminal:#FF6B5E; --terminal-wash:#2E1714;
  --lamp:#F2B544; --lamp-fill:#F2B544; --lamp-wash:#2B2210;
  --scrim:rgba(0,0,0,.6);
  --sh-s:0 1px 1.5px rgba(0,0,0,.4);
  --sh-m:0 1px 2px rgba(0,0,0,.45), 0 12px 26px -18px rgba(0,0,0,.9);
  --sh-bar:0 -1px 0 var(--line), 0 -14px 30px -24px rgba(0,0,0,.9);
  --sh-sheet:0 -10px 44px -14px rgba(0,0,0,.8);
  color-scheme:dark;
}